问题描述
我想在我的网站上有多个下拉菜单 。 问题是每当我点击第二个下拉列表时 ， 第一个下拉列表被打开。 我从w3school那里得到了代码，老实说，我没有得到它，但它确实有效，所以在我发生这种情况之前一切都很好，
以下是我的代码。
<html> <title> Dropdown </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/png" href="images/icons/favicon.ico" /> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <body> <div class="sidenav"> <h3> DROPDOWNS </h3> <br> <button onclick="myAccFunc('demoAcc')" href="javascript:void(0)" id="myBtn"> Dropdown I </button> <div id="demoAcc" class="w3-hide w3-padding-large w3-medium"> <button class="w3-bar-item w3-button">A</button> <button class="w3-bar-item w3-button">B</button> <button class="w3-bar-item w3-button">C</button> <button class="w3-bar-item w3-button">D</button> </div><br> <button onclick="myAccFunc('demoAcc-2')" href="javascript:void(0)" id="myBtn"> Dropdown II </button> <div id="demoAcc-2" class="w3-hide w3-padding-large w3-medium"> <button class="w3-bar-item w3-button">1</button> <button class="w3-bar-item w3-button">2</button> <button class="w3-bar-item w3-button">3</button> <button class="w3-bar-item w3-button">4</button> </div><br> <button onclick="myAccFunc('demoAcc-3')" href="javascript:void(0)" id="myBtn"> Dropdown III </button> <div id="demoAcc-3" class="w3-hide w3-padding-large w3-medium"> <button class="w3-bar-item w3-button">+</button> <button class="w3-bar-item w3-button">-</button> <button class="w3-bar-item w3-button">/</button> <button class="w3-bar-item w3-button">=</button> </div> </div> <script> function myAccFunc(elemId) { var x = document.getElementById(elemId); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html>
1楼
问题：您的功能是为所有人打开相同的属性ID demoAcc
解决方案 ：您需要为每个不同的元素指定唯一的ID，例如：
<div id="demoAcc" class="w3-hide w3-padding-large w3-medium">...</div>
<div id="demoAcc-2" class="w3-hide w3-padding-large w3-medium">...</div>
<div id="demoAcc-3" class="w3-hide w3-padding-large w3-medium">...</div>
然后，您需要更新您的函数以接收值：
function myAccFunc( elemId ) {
var x = document.getElementById( elemId );
...
}
然后在每个按钮上，您将定义要打开的div ID，例如：
<button onclick="myAccFunc('demoAcc')" ... > Dropdown I </button>
<button onclick="myAccFunc('demoAcc-2')" ... > Dropdown II </button>
<button onclick="myAccFunc('demoAcc-3')" ... > Dropdown III </button>
请参阅代码段：
function myAccFunc( elemId ) { var x = document.getElementById( elemId ); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } }
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <div class="sidenav"> <h3> DROPDOWNS </h3> <br> <button onclick="myAccFunc('demoAcc')" href="javascript:void(0)" id="myBtn"> Dropdown I </button> <div id="demoAcc" class="w3-hide w3-padding-large w3-medium"> <button class="w3-bar-item w3-button">A</button> <button class="w3-bar-item w3-button">B</button> <button class="w3-bar-item w3-button">C</button> <button class="w3-bar-item w3-button">D</button> </div><br> <button onclick="myAccFunc('demoAcc-2')" href="javascript:void(0)" id="myBtn-2"> Dropdown II </button> <div id="demoAcc-2" class="w3-hide w3-padding-large w3-medium"> <button class="w3-bar-item w3-button">1</button> <button class="w3-bar-item w3-button">2</button> <button class="w3-bar-item w3-button">3</button> <button class="w3-bar-item w3-button">4</button> </div><br> <button onclick="myAccFunc('demoAcc-3')" href="javascript:void(0)" id="myBtn-3"> Dropdown III </button> <div id="demoAcc-3" class="w3-hide w3-padding-large w3-medium"> <button class="w3-bar-item w3-button">+</button> <button class="w3-bar-item w3-button">-</button> <button class="w3-bar-item w3-button">/</button> <button class="w3-bar-item w3-button">=</button> </div> </div>
2楼
function myAccFunc( elemId ) {
var x = document.getElementById( elemId );
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<div class="sidenav">
<h3> DROPDOWNS </h3> <br>
<button onclick="myAccFunc('demoAcc')" href="javascript:void(0)" id="myBtn"> Dropdown I
</button>
<div id="demoAcc" class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">A</button>
<button class="w3-bar-item w3-button">B</button>
<button class="w3-bar-item w3-button">C</button>
<button class="w3-bar-item w3-button">D</button>
</div><br>
<button onclick="myAccFunc('demoAcc-2')" href="javascript:void(0)" id="myBtn-2"> Dropdown II
</button>
<div id="demoAcc-2" class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">1</button>
<button class="w3-bar-item w3-button">2</button>
<button class="w3-bar-item w3-button">3</button>
<button class="w3-bar-item w3-button">4</button>
</div><br>
<button onclick="myAccFunc('demoAcc-3')" href="javascript:void(0)" id="myBtn-3"> Dropdown III
</button>
<div id="demoAcc-3" class="w3-hide w3-padding-large w3-medium">
<button class="w3-bar-item w3-button">+</button>
<button class="w3-bar-item w3-button">-</button>
<button class="w3-bar-item w3-button">/</button>
<button class="w3-bar-item w3-button">=</button>
</div>
</div>
3楼
我已调整您的代码段以将元素的ID传递给函数。
<html> <title> Dropdown </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/png" href="images/icons/favicon.ico"/> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <body> <div class="sidenav"> <h3> DROPDOWNS </h3> <br> <button onclick="myAccFunc('demoAcc1')" href="javascript:void(0)" id="myBtn"> Dropdown I </button> <div id="demoAcc1" class="w3-hide w3-padding-large w3-medium"> <button class="w3-bar-item w3-button">A</button> <button class="w3-bar-item w3-button">B</button> <button class="w3-bar-item w3-button">C</button> <button class="w3-bar-item w3-button">D</button> </div><br> <button onclick="myAccFunc('demoAcc2')" href="javascript:void(0)" id="myBtn"> Dropdown II </button> <div id="demoAcc2" class="w3-hide w3-padding-large w3-medium"> <button class="w3-bar-item w3-button">1</button> <button class="w3-bar-item w3-button">2</button> <button class="w3-bar-item w3-button">3</button> <button class="w3-bar-item w3-button">4</button> </div><br> <button onclick="myAccFunc('demoAcc3')" href="javascript:void(0)" id="myBtn"> Dropdown III </button> <div id="demoAcc3" class="w3-hide w3-padding-large w3-medium"> <button class="w3-bar-item w3-button">+</button> <button class="w3-bar-item w3-button">-</button> <button class="w3-bar-item w3-button">/</button> <button class="w3-bar-item w3-button">=</button> </div> </div> <script> function myAccFunc(id) { var x = document.getElementById(id); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> </body> </html>
4楼
纯CSS
这可以使用纯CSS完成。
在这个例子中，有<button>元素只是为了拥有浏览器的默认按钮样式。
为了让复选框接收鼠标单击，我们在pointer-events:none的按钮上关闭它们。
您可以将<label>标签设置为看起来像按钮，因此您根本不需要按钮。
诀窍是定义复选框的下一个兄弟的display CSS属性依赖于checked-state。
.sidenav>label>button { pointer-events: none; } .sidenav>input[type="checkbox"], .sidenav>input[type="checkbox"]+div { display: none; } .sidenav>input[type="checkbox"]:checked+div { display: block; }
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <div class="sidenav"> <h3> DROPDOWNS </h3> <br> <label for="myBtn-1"><button> Dropdown I </button></label> <input type="checkbox" id="myBtn-1"> <div id="demoAcc-1" class="w3-padding-large w3-medium"> <button class="w3-bar-item w3-button">A</button> <button class="w3-bar-item w3-button">B</button> <button class="w3-bar-item w3-button">C</button> <button class="w3-bar-item w3-button">D</button> </div><br> <label for="myBtn-2"><button> Dropdown II </button></label> <input type="checkbox" id="myBtn-2"> <div id="demoAcc-2" class="w3-padding-large w3-medium"> <button class="w3-bar-item w3-button">1</button> <button class="w3-bar-item w3-button">2</button> <button class="w3-bar-item w3-button">3</button> <button class="w3-bar-item w3-button">4</button> </div><br> <label for="myBtn-3"><button> Dropdown III </button></label> <input type="checkbox" id="myBtn-3"> <div id="demoAcc-3" class="w3-padding-large w3-medium"> <button class="w3-bar-item w3-button">+</button> <button class="w3-bar-item w3-button">-</button> <button class="w3-bar-item w3-button">/</button> <button class="w3-bar-item w3-button">=</button> </div> </div>
JavaScript方法
如果你真的想用JavaScript做，你应该使用现代方式添加事件监听器而不是onclick属性。
而不是字符串操作使用classList.toggle()方法。
您根本不需要id属性：
document.addEventListener('DOMContentLoaded', () => document.querySelectorAll('.sidenav > button').forEach(el => el.addEventListener('click', ev => ev.target.nextElementSibling.classList.toggle('w3-hide') )));
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <div class="sidenav"> <h3> DROPDOWNS </h3> <br> <button> Dropdown I </button> <div class="w3-hide w3-padding-large w3-medium"> <button class="w3-bar-item w3-button">A</button> <button class="w3-bar-item w3-button">B</button> <button class="w3-bar-item w3-button">C</button> <button class="w3-bar-item w3-button">D</button> </div><br> <button> Dropdown II </button> <div class="w3-hide w3-padding-large w3-medium"> <button class="w3-bar-item w3-button">1</button> <button class="w3-bar-item w3-button">2</button> <button class="w3-bar-item w3-button">3</button> <button class="w3-bar-item w3-button">4</button> </div><br> <button> Dropdown III </button> <div class="w3-hide w3-padding-large w3-medium"> <button class="w3-bar-item w3-button">+</button> <button class="w3-bar-item w3-button">-</button> <button class="w3-bar-item w3-button">/</button> <button class="w3-bar-item w3-button">=</button> </div> </div>