多个下拉按钮 - 一次只打开一个（JS / jQuery）

Question

我一直试图创建两个语言选择下拉按钮。我成功使用了this WC3 template。但是，这种解决方案有两个缺点： 1.每个下拉按钮需要（？）一个脚本或修改该脚本; 2.你可以同时打开两个下拉按钮，这是我不想要的。

我找到了类似问题here的解决方案，但我似乎无法将其调整为下拉按钮。我试图一步一步地重做它，但我无法摆脱嵌套。

如何创建多个下拉按钮，以便他们使用一个JS / jQuery脚本（最好不使用Bootstrap），以便打开一个下拉菜单关闭任何其他当前打开的下拉列表？

修改 这是我现在的页面中的代码：

<div class="dropdown">
    <button onclick="myFunction(this)" class="dropbtn"><img src="img/flags/en.png" class="langmenu">&nbsp;&nbsp;<span class="langmenu">English</span>&nbsp;<i class="fas fa-caret-down"></i></button>
    <div id="lang2" class="dropdown-content">
        <a href="#"><img src="img/flags/en.png" class="langmenu">&nbsp;&nbsp;<span class="langmenu">English</span></a>
        <a href="#"><img src="img/flags/fr.png" class="langmenu">&nbsp;&nbsp;<span class="langmenu">French</span></a>
        <a href="#"><img src="img/flags/de.png" class="langmenu">&nbsp;&nbsp;<span class="langmenu">German</span></a>
        <a href="#"><img src="img/flags/ru.png" class="langmenu">&nbsp;&nbsp;<span class="langmenu">Russian</span></a>
        <a href="#"><img src="img/flags/pl.png" class="langmenu">&nbsp;&nbsp;<span class="langmenu">Polish</span></a>
        <a href="#"><img src="img/flags/cz.png" class="langmenu">&nbsp;&nbsp;<span class="langmenu">Czech</span></a>
        <a href="#"><img src="img/flags/zh.png" class="langmenu">&nbsp;&nbsp;<span class="langmenu">Mandarin</span></a>
    </div>
</div>

This是我在没有打破下拉列表的情况下最远的。我尝试更换外部<ul>并相应地更新css，但不知何故它没有按预期工作。我也试过在下拉内容的地方应用is-open。

Answer 1

我修改了WC3模板，使其可以使用2个下拉菜单，只需稍加修改脚本就无法同时打开这两个菜单。
此解决方案适用于本机JavaScript。有些人更喜欢jQuery 请参阅下面的所有代码，我评论了我做了哪些修改：

/* When the user clicks on the button, 
closes every dropdowns and open the only one passed as argument */
/* Pick the one you prefer, Javascript or jQuery… */

/* jQuery */
function myJQueryFunction(element) {
  var elements = ".dropdown-content";
  $(elements).removeClass('show');
  $(element).next(elements).toggleClass("show");
}

/* Javascript only */
function myFunction(element) {
  var dropdowns = document.getElementsByClassName("dropdown-content");
  var i;
  for (i = 0; i < dropdowns.length; i++) {
    dropdowns[i].classList.remove('show');
  }
  // element.nextSibling is the carriage return… need to go to the next next to point on the dropdown menu
  element.nextSibling.nextSibling.classList.toggle("show");
}




/* W3C function to close the dropdown when clicked outside. */
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #ddd
}

.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Clickable Dropdowns</h2>

<div class="dropdown">
  <!-- onclick, call the Vanilla function for this one -->
  <button onclick="myFunction(this);" class="dropbtn">Dropdown1</button>
  <div id="myDropdown1" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>
<!-- Added 2nd dropdown ! -->
<div class="dropdown">
  <!-- onclick, call the jQuery function for this one -->
  <button onclick="myJQueryFunction(this);" class="dropbtn">Dropdown2</button>
  <div id="myDropdown2" class="dropdown-content">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </div>
</div>

希望它有所帮助！

已添加：使用this作为示例使用nextSibling的提议 编辑：也为那些喜欢的人添加了jQuery解决方案。

Answer 2

这是使用jquery的简短解决方案。只需一个脚本，U就可以无限下拉。

希望这就是你要找的东西。如果需要，很乐意解释或帮助提供更好的解决方案。

＆＃13;

＆＃13;

$('.dropDown').each(function() {
  $(this).click(function() {
    $('.drop').removeClass('drop');
    $(this).addClass('drop');
  })
})

＆＃13;

.drop-item {
  display: block;
  position: relative;
}

.nav-content {
  margin-left: 20px;
  display: none;
  flex-direction: column;
}

.drop+.nav-content {
  display: block;
}

.nav-content a .drop-item {
  margin-bottom: 2%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="index.html">Item1</a></li>
  <li><a href="live.html">Item2</a></li>
  <li><a href="#" id="stock" class="dropDown">Drop1</a>
    <div class="nav-content">
      <a class="drop-item first" href="#">SubItem1</a>
      <a class="drop-item" href="#">SubItem2</a>
      <a class="drop-item" href="#">SubItem3</a>
    </div>
  </li>
  <li><a href="#" id="videos" class="dropDown">Drop2</a>
    <div class="nav-content">
      <a class="drop-item first" href="">SubItem1</a>
      <a class="drop-item" href="">SubItem2</a>
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;