单击外部时，我无法隐藏导航下拉列表

Question

我有一个问题，当我在下拉菜单外单击时无法删除类。这是我的代码笔：https ://codepen.io/nguyenchinhhiep/pen/oNvdzOB

var getNavItem = document.querySelectorAll('.nav-item');

getNavItem.forEach(item => {

  item.addEventListener('click', function(e) {

    var siblings = getSiblings(this);

    siblings.forEach(item => {

      item.classList.remove('active');

    })

    this.classList.toggle('active');

// Remove when click outside

    document.addEventListener("click", function(event) {

      if(event.target.tagName == 'BODY') {

        this.classList.remove('active');

      }

   })

  });

});

// Get Siblings

var getSiblings = function (elem) {

    var siblings = [];

    var sibling = elem.parentNode.firstChild;

    for (; sibling; sibling = sibling.nextSibling) {

        if (sibling.nodeType !== 1 || sibling === elem) continue;

        siblings.push(sibling);

    }

    return siblings;

};

var elem = document.querySelector('#some-element');

Answer 1

您可以在外部点击时删除“活动”类：window.addEventListener('click', function(e) {&nbsp; var els = document.getElementsByClassName('dropdown');&nbsp; for (var i = 0; i < els.length; i++) {&nbsp; &nbsp; if (els[i].contains(e.target)) {&nbsp; &nbsp; &nbsp; // Clicked on dropdown&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; // Clicked outside the dropdown&nbsp; &nbsp; &nbsp; els[i].classList.remove('active');&nbsp; &nbsp; }&nbsp; }});// Navigation mobilevar getNavbar = document.querySelector('nav');var getNavbarToggler = document.querySelector('.navbar-toggler');var getNavbarNav = document.querySelector('.navbar-nav');getNavbarToggler.addEventListener('click', toggleNavbar);function toggleNavbar() {&nbsp; getNavbarToggler.classList.toggle('active');&nbsp; getNavbarNav.classList.toggle('active');}// Dropdown Menuvar getNavItem = document.querySelectorAll('.nav-item');getNavItem.forEach(item => {&nbsp; item.addEventListener('click', function(e) {&nbsp; &nbsp; var siblings = getSiblings(this);&nbsp; &nbsp; siblings.forEach(item => {&nbsp; &nbsp; &nbsp; item.classList.remove('active');&nbsp; &nbsp; })&nbsp; &nbsp; this.classList.toggle('active');&nbsp; });});// Get Siblingsvar getSiblings = function(elem) {&nbsp; var siblings = [];&nbsp; var sibling = elem.parentNode.firstChild;&nbsp; for (; sibling; sibling = sibling.nextSibling) {&nbsp; &nbsp; if (sibling.nodeType !== 1 || sibling === elem) continue;&nbsp; &nbsp; siblings.push(sibling);&nbsp; }&nbsp; return siblings;};var elem = document.querySelector('#some-element');// code for hiding dropdownwindow.addEventListener('click', function(e) {&nbsp; var els = document.getElementsByClassName('dropdown');&nbsp; for (var i = 0; i < els.length; i++) {&nbsp; &nbsp; if (els[i].contains(e.target)) {&nbsp; &nbsp; &nbsp; // Clicked on dropdown&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; // Clicked outside the dropdown&nbsp; &nbsp; &nbsp; els[i].classList.remove('active');&nbsp; &nbsp; }&nbsp; }});/* Global Styles */* {&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; box-sizing: border-box;}body {&nbsp; overflow-x: hidden;}ul {&nbsp; list-style: none;}a {&nbsp; text-decoration: none;}.container {&nbsp; max-width: 1170px;&nbsp; margin: 0 auto;}/* Navigation */nav {&nbsp; background: #333;&nbsp; transition: all ease .4s;}.navbar {&nbsp; display: flex;&nbsp; justify-content: space-between;&nbsp; align-items: center;&nbsp; padding: 0 10px;&nbsp; position: relative;}.navbar-brand {&nbsp; display: block;&nbsp; color: #fff;&nbsp; font-size: 30px;}.navbar-nav {&nbsp; display: flex;&nbsp; justify-content: space-between;&nbsp; align-items: center;}.nav-link,.dropdown-item {&nbsp; display: block;&nbsp; color: #fff;&nbsp; padding: 20px 16px;&nbsp; text-align: center;&nbsp; cursor: pointer;}.nav-link:hover,.dropdown-item:hover {&nbsp; background: #111;}.nav-link.active,.nav-link.active:hover {&nbsp; background-color: #4CAF50;}.dropdown-menu {&nbsp; display: none;}.nav-item.active .dropdown-menu {&nbsp; display: block;}.nav-link i {&nbsp; transition: all ease .4s;}.nav-item.active i {&nbsp; transform: rotate(180deg);}.dropdown {&nbsp; position: relative;}.dropdown-menu {&nbsp; position: absolute;&nbsp; background: #333;&nbsp; left: 0;&nbsp; width: 100%;&nbsp; text-align: center;}.arrow-icon {&nbsp; width: 0;&nbsp; height: 0;&nbsp; border-style: solid;&nbsp; border-width: 6px 6px 0 6px;&nbsp; border-color: #fff transparent transparent transparent;&nbsp; position: absolute;}.navbar-toggler {&nbsp; display: none;&nbsp; cursor: pointer;&nbsp; position: relative;&nbsp; width: 30px;&nbsp; height: 30px;}.navbar-toggler .navbar-toggler-icon {&nbsp; width: 100%;&nbsp; height: 3px;&nbsp; margin: 5px 0;&nbsp; background: #fff;&nbsp; display: block;&nbsp; transition: all ease .3s;}.sticky-nav {&nbsp; position: fixed;&nbsp; top: 0;&nbsp; width: 100%;&nbsp; transition: all ease .4s;}@media (max-width: 700px) {&nbsp; nav {&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; width: 100%;&nbsp; }&nbsp; .dropdown-menu {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; background: #444;&nbsp; }&nbsp; .dropdown-item {&nbsp; &nbsp; text-align: left;&nbsp; &nbsp; padding-left: 50px;&nbsp; }&nbsp; .navbar-brand {&nbsp; &nbsp; padding: 10px 0;&nbsp; }&nbsp; .navbar-toggler {&nbsp; &nbsp; display: block;&nbsp; &nbsp; transition: all ease .3s;&nbsp; }&nbsp; .navbar-toggler.active {&nbsp; &nbsp; transform: rotate(225deg);&nbsp; }&nbsp; .navbar-toggler.active .navbar-toggler-icon {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 30%;&nbsp; &nbsp; transition: all ease .3s;&nbsp; }&nbsp; .navbar-toggler.active .navbar-toggler-icon:first-child {&nbsp; &nbsp; transform: rotate(-3deg);&nbsp; }&nbsp; .navbar-toggler.active .navbar-toggler-icon:nth-child(2) {&nbsp; &nbsp; opacity: 0;&nbsp; }&nbsp; .navbar-toggler.active .navbar-toggler-icon:last-child {&nbsp; &nbsp; transform: rotate(90deg);&nbsp; }&nbsp; .navbar-nav {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 100%;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 0;&nbsp; &nbsp; display: block;&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; background: #333;&nbsp; &nbsp; transition: all ease .4s;&nbsp; }&nbsp; .navbar-nav.active {&nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; overflow: auto;&nbsp; }&nbsp; .nav-link {&nbsp; &nbsp; text-align: left;&nbsp; }}<nav>&nbsp; <div class="container navbar">&nbsp; &nbsp; <a href="#" class="navbar-brand">Navigation</a>&nbsp; &nbsp; <div class="navbar-toggler">&nbsp; &nbsp; &nbsp; <span class="navbar-toggler-icon"></span>&nbsp; &nbsp; &nbsp; <span class="navbar-toggler-icon"></span>&nbsp; &nbsp; &nbsp; <span class="navbar-toggler-icon"></span>&nbsp; &nbsp; </div>&nbsp; &nbsp; <ul class="navbar-nav">&nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="nav-link active">Home</a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="nav-item dropdown" id="m1">&nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link">Dropdown 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fa fa-caret-down"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; <div class="dropdown-menu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="dropdown-item">Item 1</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="dropdown-item">Item 2</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="dropdown-item">Item 3</a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="nav-link">About</a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="nav-item dropdown">&nbsp; &nbsp; &nbsp; &nbsp; <a class="nav-link">Dropdown 2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fa fa-caret-down"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; <div class="dropdown-menu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="dropdown-item">Item 1</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="dropdown-item">Item 2</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="dropdown-item">Item 3</a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; <li class="nav-item">&nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="nav-link">Contact</a>&nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; </ul>&nbsp; </div></nav>

Answer 2

以下代码将导致main-div 中的每次点击关闭下拉列表：document.getElementById("main").addEventListener("click", function(event) {&nbsp; &nbsp; getNavItem.forEach(item => {&nbsp; &nbsp; &nbsp; &nbsp; item.classList.remove('active')&nbsp; &nbsp; })})只需将它从上面放在您的代码下方并删除它// Remove when click outsidedocument.addEventListener("click", function(event) {&nbsp; &nbsp; if(event.target.tagName == 'BODY') {&nbsp; &nbsp; &nbsp; &nbsp; this.classList.remove('active');&nbsp; &nbsp; }})从你的代码。