单击时的 Jquery 下拉菜单 - 当用户单击菜单按钮、单击菜单外部或单击新下拉菜单时隐藏菜单答案

【问题标题】：Jquery drop down menu on click - Hide menu when user clicks menu button, clicks outside of menu OR clicks on a new drop单击时的 Jquery 下拉菜单 - 当用户单击菜单按钮、单击菜单外部或单击新下拉菜单时隐藏菜单
【发布时间】：2022-11-03 23:36:16
【问题描述】：

我一直在这里寻找一个示例下拉导航菜单，它做了三件事：

当用户点击下拉菜单时，它会显示下拉菜单（有效）
当用户在导航区域之外或页面上的任何其他地方单击时关闭一个打开的水滴（这也有效）

当用户点击另一个下拉菜单（如果一个下拉菜单已经打开）时，它会关闭之前打开的下拉菜单并打开新的下拉菜单。 <-（我被困在这里）。

目前，如果您单击一个下拉菜单，然后单击另一个，第一个保持打开状态。如果您单击另一个下拉菜单，我希望关闭任何其他打开的菜单。但是我想保留当用户在菜单之外单击文档中任何位置时它也会关闭的行为。

我发现了几个 SO 帖子可以解决其中的一些问题。然而，有时他们的导航栏只有 1 个下拉菜单作为示例。有时由于某种原因，该解决方案会导致我的导航中出现其他问题。所以我决定创建一个新帖子。

请注意，我现在正在学习 JS 和 jquery。

这是我的代码：

$(document).ready(function() {
  $('.dropdown').click(function(e) {
    e.stopPropagation();
    // hide all dropdown that may be visible - 
    // this works but it breaks the functionality of toggling open and closed
    // when you click on the menu item
    e.preventDefault();
    // close when click outside
    $(this).find('.dropdown-content').toggleClass('open')

  });
  // Close dropdown when u click outside of the nav ul
  $(document).click(function(e) {
    if (!e.target.closest("ul") && $(".dropdown-content").hasClass("open")) {
      $(".dropdown-content").removeClass("open");
    }
  })
});

.nav__topbar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 2em;
  background: #fff;
}

.nav__links {
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-left: auto!important;
  a {
    float: left;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    &:hover {
      color: #ccc;
    }
  }
  .icon {
    display: none;
  }
}

.nav__links .dropdown .dropdown-content {
  position: absolute;
  max-width: 25%;
}

.dropdown .dropbtn,
.nav__links a {
  font-size: 1.5em!important;
  color: #222;
}


/* Upon click the menu should turn into a vertical stacked menu with a soft drop shadow */

.nav__links.vertical {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 2em;
  top: 50%;
  left: 70%;
  background-color: #fff;
  z-index: 1;
  border: 1px solid #f2f3f3;
  border-radius: 4px;
  background: #fff;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.dropdown {
  float: left;
  overflow: hidden;
}


/* Codepen doesn't like when i nest styles */

.dropdown .dropbtn {
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown {
  cursor: pointer;
  display: block;
  &:hover {
    background-color: #444;
  }
}


/* Style the dropdown content (hidden by default) */

.dropdown-content {
  display: none;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  width: 100%;
  transition: all 0.25s ease-in;
  transform: translateY(-10px);
}


/* Style the links inside the dropdown  codepen doesn't like my nesting */

.dropdown-content a {
  float: none;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content li,
.nav__links li,
.nav__links li a {
  list-style-type: none;
  text-decoration: none;
}

.dropdown li {
  padding: 20px
}

.dropdown .dropdown-content.open {
  display: block;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav__topbar">
  <ul class="nav__links">
    <li class="dropdown" data-hover="title">
      <button class="dropbtn">community <span class="downBtn">&#x25BC;</span>
    </button>
      <ul class="dropdown-content">
        <li><a href="#" class="masthead__menu-item hover-underline">item 1</a></li>
        <li><a href="#" class="masthead__menu-item hover-underline">item 2</a></li>
        <li><a href="#" class="masthead__menu-item hover-underline">item 3</a></li>
      </ul>
    </li>
    <li><a href="#">Menu item 2</a></li>
    <li class="dropdown" data-hover="title">
      <button class="dropbtn">menu <span class="downBtn">&#x25BC;</span>
    </button>
      <ul class="dropdown-content">
        <li><a href="#" class="masthead__menu-item hover-underline">item 1</a></li>
        <li><a href="#" class="masthead__menu-item hover-underline">item 2</a></li>
        <li><a href="#" class="masthead__menu-item hover-underline">item 3</a></li>
      </ul>
    </li>
    <li class="dropdown" data-hover="title">
      <button class="dropbtn">menu <span class="downBtn">&#x25BC;</span>
    </button>
      <ul class="dropdown-content">
        <li><a href="#" class="masthead__menu-item hover-underline">item 1</a></li>
        <li><a href="#" class="masthead__menu-item hover-underline">item 2</a></li>
        <li><a href="#" class="masthead__menu-item hover-underline">item 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

这里 [is a codepen](https://codepen.io/lwasser/pen/BaVKYNX 也有相同的代码，以防你想玩代码。

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

你快到了！

将单击的元素存储在 var 中。
从除单击的元素之外的所有元素中删除 open 类名。

Toggle 被点击元素的open 类。

 $(document).ready(function () {
     $(".dropdown").click(function (e) {
     e.stopPropagation();
     e.preventDefault();

     // 1. Store in a var the clicked element
     var current_dropdown = $(this).find(".dropdown-content");


     $(".dropdown-content").each(function() {
         var element = $(this);
         // 2. Remove the `open` class name from all elements except the clicked one.
        if (!element.is(current_dropdown)) {
           $(this).removeClass("open");
        }
     });

     // 3. Toggle the open class of the clicked element.
     current_dropdown.toggleClass("open"); 
  });

  // Close dropdown when u click outside of the nav ul
  $(document).click(function (e) {
     if (!e.target.closest("ul") && $(".dropdown-content").hasClass("open")) {
         $(".dropdown-content").removeClass("open");
     }
  });
});

我分叉了你的代码笔：

https://codepen.io/Valeriu-Ciuca/pen/KKezYME

【讨论】：

谢谢你！我试图关闭所有但我把它放在错误的位置。该修复工作完美！太感谢了！！
好的，实际上我只是做了更多的测试，我记得为什么那个解决方案不起作用。当我实施该解决方案时，它会破坏用户再次单击菜单项时的功能，如果这样做有意义，它会关闭吗？如果您打开一个菜单然后尝试通过再次单击该菜单项来关闭它，您可以在代码笔中看到该行为。
哦，我不知道。我更新了笔。
我也用更好的解释更新了答案。

【解决方案2】：

在添加公开课时，删除其他下拉菜单的公开课

$(this).siblings('.dropdown').find('.dropdown-content').removeClass('open');

查找具有下拉类的兄弟姐妹并删除相应元素的开放类。

$(document).ready(function () {
  $(".dropdown").click(function (e) {
    e.stopPropagation();
    e.preventDefault();
    // close when click outside
    $(this).find(".dropdown-content").toggleClass("open");
    $(this).siblings('.dropdown').find('.dropdown-content').removeClass('open');
  });

  // Close dropdown when u click outside of the nav ul
  $(document).click(function (e) {
    if (!e.target.closest("ul") && $(".dropdown-content").hasClass("open")) {
      $(".dropdown-content").removeClass("open");
    }
  });
});

.nav__topbar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 2em;
  background: #fff;
}

.nav__links {
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-left: auto!important;
  
  a {
    float: left;
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    
    &:hover {
      color: #ccc;
    }
  }

  .icon {
    display: none;
  }
}

.dropdown .dropbtn, .nav__links a {
  font-size: 1.5em!important;
  color: #222;
}

/* Upon click the menu should turn into a vertical stacked menu with a soft drop shadow */
 .nav__links.vertical {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 2em;
  top: 50%;
  left: 70%;
  background-color: #fff;
  z-index: 1;
  border: 1px solid #f2f3f3;
  border-radius: 4px;
  background: #fff;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}

.dropdown {
  float: left;
  overflow: hidden;
}

/* Codepen doesn't like when i nest styles */
 .dropdown .dropbtn {
    border: none;
    outline: none;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }

.dropdown {
  cursor: pointer;
  display: block;
  &:hover {
    background-color: #444;
  }
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  width: 100%; 
  transition: all 0.25s ease-in; 
  transform: translateY(-10px);
}

/* Style the links inside the dropdown  codepen doesn't like my nesting */
.dropdown-content a {
  float: none;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content li, .nav__links li, .nav__links li a {
  list-style-type: none;
  text-decoration: none;
}

.dropdown li {
  padding: 20px
}

.dropdown .dropdown-content.open {
  display: block;
  padding: 0;
}

.nav__links .dropdown .dropdown-content {
  position: absolute;
  max-width: 25%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><html>
  <head>
  </head>
  <body>
  <nav class="nav__topbar">
    <ul class="nav__links">
      <li class="dropdown" data-hover="title">
        <button class="dropbtn">community <span class="downBtn">&#x25BC;</span>
        </button>
        <ul class="dropdown-content">
          <li><a href="#">item 1</a></li>
          <li><a href="#">item 2</a></li>
          <li><a href="#">item 3</a></li>
        </ul>
      </li>
      <li><a href="#">Menu item 2</a></li>
      <li class="dropdown" data-hover="title">
        <button class="dropbtn">menu <span class="downBtn">&#x25BC;</span>
        </button>
        <ul class="dropdown-content">
          <li><a href="#">item 1</a></li>
          <li><a href="#">item 2</a></li>
          <li><a href="#">item 3</a></li>
        </ul>
      </li>
      <li class="dropdown" data-hover="title">
        <button class="dropbtn">menu <span class="downBtn">&#x25BC;</span>
        </button>
        <ul class="dropdown-content">
          <li><a href="#">item 1</a></li>
          <li><a href="#">item 2</a></li>
          <li><a href="#">item 3</a></li>
        </ul>
      </li>
    </ul>
  </nav>
    
  </body>
</html>

【讨论】：