我一直在尝试创建两个语言选择下拉按钮。我成功使用了这个 W3Schools 模板。然而，这个解决方案有两个缺点：
1. 您需要（？）每个下拉按钮一个脚本或对该脚本的修改；
2.你可以同时打开两个下拉按钮，这是我不想要的。
我找到了类似问题的解决方案here，但我似乎无法使其适应下拉按钮。我试图一步一步地重新设计它，但我无法摆脱嵌套在 .
如何创建多个下拉按钮，以便它们使用一个 JS/jQuery 脚本（最好没有 Bootstrap），并且打开一个下拉菜单会关闭任何其他当前打开的下拉菜单？
Edit:这是我现在页面中的代码：
<div class="dropdown">
<button onclick="myFunction(this)" class="dropbtn"><img src="img/flags/en.png" class="langmenu"> <span class="langmenu">English</span> <i class="fas fa-caret-down"></i></button>
<div id="lang2" class="dropdown-content">
<a href="#"><img src="img/flags/en.png" class="langmenu"> <span class="langmenu">English</span></a>
<a href="#"><img src="img/flags/fr.png" class="langmenu"> <span class="langmenu">French</span></a>
<a href="#"><img src="img/flags/de.png" class="langmenu"> <span class="langmenu">German</span></a>
<a href="#"><img src="img/flags/ru.png" class="langmenu"> <span class="langmenu">Russian</span></a>
<a href="#"><img src="img/flags/pl.png" class="langmenu"> <span class="langmenu">Polish</span></a>
<a href="#"><img src="img/flags/cz.png" class="langmenu"> <span class="langmenu">Czech</span></a>
<a href="#"><img src="img/flags/zh.png" class="langmenu"> <span class="langmenu">Mandarin</span></a>
</div>
</div>
This是我在不破坏下拉菜单的情况下达到的最远距离。我尝试更换外部<ul>s 并相应地更新 css，但不知何故它没有按预期工作。我还尝试在下拉内容所在的位置应用 is-open 。
我修改了 W3Schools 模板，使其可以与 2 个下拉菜单一起使用，而只需对脚本进行一点修改即可无法同时打开这两个菜单。
该解决方案适用于普通 JavaScript。有些人可能更喜欢 jQuery。
请看下面的代码，我评论了一些部分：
/* When the user clicks on the button,
closes every dropdowns and open the only one passed as argument */
/* Javascript only */
function myFunction(element) {
var dropdowns = document.getElementsByClassName("dropdown-content");
// element.nextSibling is the carriage return… The dropdown menu is the next next.
var thisDropdown = element.nextSibling.nextSibling;
if (!thisDropdown.classList.contains('show')) { // Added to hide dropdown if clicking on the one already open
var i;
for (i = 0; i < dropdowns.length; i++) {
dropdowns[i].classList.remove('show');
}
}
// Toggle the dropdown on the element clicked
thisDropdown.classList.toggle("show");
}
/* W3Schools 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;
}
<div class="dropdown">
<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">
<button onclick="myFunction(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 using nextSibling， 举个例子。
⋅ ⋅ ⋅
一个 jQuery 解决方案，适合那些喜欢的人。
/* When the user clicks on the button,
closes every dropdowns and open the only one passed as argument */
/* jQuery */
function myFunction(element) {
var elements = ".dropdown-content";
$(elements).removeClass('show');
$(element).next(elements).toggleClass("show");
}
/* W3Schools 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>
<div class="dropdown">
<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>
<div class="dropdown">
<button onclick="myFunction(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>
希望能帮助到你 ！
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
