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

问题描述

我一直在尝试创建两个语言选择下拉按钮。我成功地使用了。然而，这个解决方案有两个缺点：$ b​​ $ b 1.您需要（？）每个下拉按钮一个脚本或修改该脚本;
2.您可以同时打开两个下拉按钮，这是我不想要的。

我找到了类似问题的解决方案，但我似乎无法适应下拉按钮。我试图一步一步地修改它，但我无法摆脱嵌套。

如何创建多个下拉按钮，以便他们使用一个JS / jQuery脚本（最好没有Bootstrap），并打开一个下拉菜单关闭任何其他当前打开的下拉菜单？
$ b 编辑：
这是我现在页面中的代码：

 < div class =dropdown> ; 
< button onclick =myFunction（this）class =dropbtn>< img src =img / flags / en.pngclass =langmenu>& nbsp;& nbsp ;< span class =langmenu> English< / span>& nbsp;< i class =fas fa-caret-down>< / i>< / button> 
< div id =lang2class =dropdown-content> 
< a href =＃>< img src =img / flags / en.pngclass =langmenu>& nbsp;& nbsp;< span class =langmenu >英语< /跨度>< / A> 
< a href =＃>< img src =img / flags / fr.pngclass =langmenu>& nbsp;& nbsp;< span class =langmenu >法语< /跨度>< / A> 
< a href =＃>< img src =img / flags / de.pngclass =langmenu>& nbsp;& nbsp;< span class =langmenu >德语< /跨度>< / A> 
< a href =＃>< img src =img / flags / ru.pngclass =langmenu>& nbsp;& nbsp;< span class =langmenu >俄语< /跨度>< / A> 
< a href =＃>< img src =img / flags / pl.pngclass =langmenu>& nbsp;& nbsp;< span class =langmenu >波兰< /跨度>< / A> 
< a href =＃>< img src =img / flags / cz.pngclass =langmenu>& nbsp;& nbsp;< span class =langmenu >捷克< /跨度>< / A> 
< a href =＃>< img src =img / flags / zh.pngclass =langmenu>& nbsp;& nbsp;< span class =langmenu >国语< /跨度>< / A> 
< / div> 
< / div> 
  

这是我在没有打破下拉菜单的情况下获得的最远的。我尝试用外部< ul> s替换，并相应地更新了css，但不知怎的，它没有按预期工作。我也尝试在下拉内容中应用is-open。

解决方案

我修改了WC3模板，使其可以使用2个下拉列表菜单无法同时打开，只需对脚本稍作修改。

此解决方案适用于原生javascript。有些人可能更喜欢jQuery。

请参阅下面的所有代码，我评论了我在哪里做了修改：
$ b

.dropbtn {background-color：＃ 3498DB;白颜色;填充：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;位置：绝对; background-color：＃f1f1f1; min-width：160px;溢出：自动; box-shadow：0px 8px 16px 0px rgba（0，0，0，0.2）; z-index：1;}。dropdown-content a {color：black; padding：12px 16px;文字修饰：无; 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，为此调用Vanilla函数 - > < button onclick =myFunction（this）;类= dropbtn > Dropdown1< /按钮> < div id =myDropdown1class =dropdown-content> < a href =＃home>主页< / a> < a href =＃about>关于< / a> < a href =＃contact>联络人< / a> < / div>< / div><！ - 添加了第二个下拉菜单！ - >< div class =dropdown> <！ -  onclick，为此调用jQuery函数 - > < button onclick =myJQueryFunction（this）;类= dropbtn > Dropdown2< /按钮> < div id =myDropdown2class =dropdown-content> < a href =＃home>主页< / a> < a href =＃about>关于< / a> < a href =＃contact>联络人< / a> < / div>< / div>  

！

新增：使用这个使用 nextSibling ，作为例子。

编辑：也为那些喜欢的人添加了jQuery解决方案。

I've been trying to create two language selection dropdown buttons. I succeeded using this WC3 template. However, this solution has two drawbacks:1. you need (?) one script per dropdown button or modification of that script;2. you can have two dropdown buttons open at the same time, which I don't want.

I found a solution to a similar problem here, but I cannot seem to be able to adapt it to dropdown buttons. I tried to rework it step-by-step, but I cannot get rid of nested in .

How can I create multiple dropdown buttons, so that they use one JS/jQuery script (preferably without Bootstrap), and so that opening one dropdown closes any other currently open dropdown?

Edit:This is the code in my page I have now:

<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 is the furthest I ever got without breaking the dropdowns. I tried replacing the outside <ul>s with and update the css accordingly, but somehow it didn't work as intended. I also tried applying is-open where dropdown-content is.

解决方案

I modified the WC3 template to make it work with 2 dropdown menus that can't be opened at the same time with just a little modification of the script.
This solution works with native javascript. Some could prefer jQuery.
Please see below all the code, I commented where I made modifications:

/* 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>

Hope it helps !

Added: Proposition of utilisation of this using nextSibling, as an example.
Edit: Added jQuery solution too, for those who prefer.

这篇关于多个下拉按钮 - 一次只能打开一个（JS / jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！