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

Question

我有一个问题，当我在下拉菜单外单击时无法删除类。这是我的代码笔：https ://codepen.io/nguyenchinhhiep/pen/oNvdzOBvar 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 Siblingsvar 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) {

  var els = document.getElementsByClassName('dropdown');

  for (var i = 0; i < els.length; i++) {

    if (els[i].contains(e.target)) {

      // Clicked on dropdown

    } else {

      // Clicked outside the dropdown

      els[i].classList.remove('active');

    }

  }

});

// Navigation mobile

var getNavbar = document.querySelector('nav');

var getNavbarToggler = document.querySelector('.navbar-toggler');

var getNavbarNav = document.querySelector('.navbar-nav');

getNavbarToggler.addEventListener('click', toggleNavbar);

function toggleNavbar() {

  getNavbarToggler.classList.toggle('active');

  getNavbarNav.classList.toggle('active');

}

// Dropdown Menu

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');

  });

});

// 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');

// code for hiding dropdown

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

  var els = document.getElementsByClassName('dropdown');

  for (var i = 0; i < els.length; i++) {

    if (els[i].contains(e.target)) {

      // Clicked on dropdown

    } else {

      // Clicked outside the dropdown

      els[i].classList.remove('active');

    }

  }

});

/* Global Styles */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

  overflow-x: hidden;

}

ul {

  list-style: none;

}

a {

  text-decoration: none;

}

.container {

  max-width: 1170px;

  margin: 0 auto;

}

/* Navigation */

nav {

  background: #333;

  transition: all ease .4s;

}

.navbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 0 10px;

  position: relative;

}

.navbar-brand {

  display: block;

  color: #fff;

  font-size: 30px;

}

.navbar-nav {

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.nav-link,

.dropdown-item {

  display: block;

  color: #fff;

  padding: 20px 16px;

  text-align: center;

  cursor: pointer;

}

.nav-link:hover,

.dropdown-item:hover {

  background: #111;

}

.nav-link.active,

.nav-link.active:hover {

  background-color: #4CAF50;

}

.dropdown-menu {

  display: none;

}

.nav-item.active .dropdown-menu {

  display: block;

}

.nav-link i {

  transition: all ease .4s;

}

.nav-item.active i {

  transform: rotate(180deg);

}

.dropdown {

  position: relative;

}

.dropdown-menu {

  position: absolute;

  background: #333;

  left: 0;

  width: 100%;

  text-align: center;

}

.arrow-icon {

  width: 0;

  height: 0;

  border-style: solid;

  border-width: 6px 6px 0 6px;

  border-color: #fff transparent transparent transparent;

  position: absolute;

}

.navbar-toggler {

  display: none;

  cursor: pointer;

  position: relative;

  width: 30px;

  height: 30px;

}

.navbar-toggler .navbar-toggler-icon {

  width: 100%;

  height: 3px;

  margin: 5px 0;

  background: #fff;

  display: block;

  transition: all ease .3s;

}

.sticky-nav {

  position: fixed;

  top: 0;

  width: 100%;

  transition: all ease .4s;

}

@media (max-width: 700px) {

  nav {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

  }

  .dropdown-menu {

    position: relative;

    background: #444;

  }

  .dropdown-item {

    text-align: left;

    padding-left: 50px;

  }

  .navbar-brand {

    padding: 10px 0;

  }

  .navbar-toggler {

    display: block;

    transition: all ease .3s;

  }

  .navbar-toggler.active {

    transform: rotate(225deg);

  }

  .navbar-toggler.active .navbar-toggler-icon {

    position: absolute;

    top: 30%;

    transition: all ease .3s;

  }

  .navbar-toggler.active .navbar-toggler-icon:first-child {

    transform: rotate(-3deg);

  }

  .navbar-toggler.active .navbar-toggler-icon:nth-child(2) {

    opacity: 0;

  }

  .navbar-toggler.active .navbar-toggler-icon:last-child {

    transform: rotate(90deg);

  }

  .navbar-nav {

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    height: 0;

    display: block;

    overflow: hidden;

    background: #333;

    transition: all ease .4s;

  }

  .navbar-nav.active {

    height: 100vh;

    overflow: auto;

  }

  .nav-link {

    text-align: left;

  }

}

<nav>

  <div class="container navbar">

    <a href="#" class="navbar-brand">Navigation</a>

    <div class="navbar-toggler">

      <span class="navbar-toggler-icon"></span>

      <span class="navbar-toggler-icon"></span>

      <span class="navbar-toggler-icon"></span>

    </div>

    <ul class="navbar-nav">

      <li class="nav-item">

        <a href="#" class="nav-link active">Home</a>

      </li>

      <li class="nav-item dropdown" id="m1">

        <a class="nav-link">Dropdown 1

                    <i class="fa fa-caret-down"></i>

                </a>

        <div class="dropdown-menu">

          <a href="#" class="dropdown-item">Item 1</a>

          <a href="#" class="dropdown-item">Item 2</a>

          <a href="#" class="dropdown-item">Item 3</a>

        </div>

      </li>

      <li class="nav-item">

        <a href="#" class="nav-link">About</a>

      </li>

      <li class="nav-item dropdown">

        <a class="nav-link">Dropdown 2

                    <i class="fa fa-caret-down"></i>

                </a>

        <div class="dropdown-menu">

          <a href="#" class="dropdown-item">Item 1</a>

          <a href="#" class="dropdown-item">Item 2</a>

          <a href="#" class="dropdown-item">Item 3</a>

        </div>

      </li>

      <li class="nav-item">

        <a href="#" class="nav-link">Contact</a>

      </li>

    </ul>

  </div>

</nav>

Answer 2

以下代码将导致main-div 中的每次点击关闭下拉列表：

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

    getNavItem.forEach(item => {

        item.classList.remove('active')

    })

})

只需将它从上面放在您的代码下方并删除它

// Remove when click outside

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

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

        this.classList.remove('active');

    }

})

从你的代码。