des*_*een 4 html javascript dropdown
我正在尝试在我的网站上添加多个下拉菜单。问题是，每当我单击第二个下拉列表时，第一个下拉列表便被打开。我从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>问题：
您的函数正在demoAcc为所有对象打开相同的属性ID
解决方案：您将需要为每个不同的元素指定唯一的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>
见摘要：
<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 );
...
}
| 归档时间： |
|
| 查看次数： |
80 次 |
| 最近记录： |