我有点Javascript,它在点击时控制下拉菜单
<script>
function show_menu(){
var menu = document.getElementById('dropdown_menu');
if(menu.style.display == 'block'){
menu.style.display = 'none';
}else {
menu.style.display = 'block';
}
}
</script>
这是HTML
<nav>
<div class="dropdown_button" class="menu_button" onClick="show_menu()">Schedule 1</div>
<div id="dropdown_menu" class="hidden_menu">
<ul>
<li>option 1</li>
<li>option 2</li>
</ul>
</div>
</nav>
这是一种风格
<style>
.hidden_menu{display:none}
</style>
到目前为止一切正常,但如果我在菜单栏中再添加一个下拉菜单,它们就不起作用,因为ID =“dropdown_menu”仅适用于一个元素,而不适用于另一个元素。
<nav>
<div class="dropdown_button" class="menu_button" onClick="show_menu()">Schedule 1</div>
<div id="dropdown_menu" class="hidden_menu">
<ul>
<li>option 1</li>
<li>option 2</li>
</ul>
</div>
<div class="dropdown_button" class="menu_button" onClick="show_menu()">Schedule 2</div>
<div id="dropdown_menu" class="hidden_menu">
<ul>
<li>option 3</li>
<li>option 4</li>
</ul>
</div>
</nav>
我怎么解决这个问题?请帮我一把谢谢
当我查看代码时,在这两个地方ID都是相同的<div id="dropdown_menu" class="hidden_menu">
您应该为不同的div提供不同的ID,您可以在JavaScript方法中传递一些参数来识别脚本中的div。
尝试将id作为你要显示的div的参数发送,并将所有id发送给唯一的id
function show_menu(id)
像这样改变你的HTML
onClick="show_menu('IdOfTheDiv')"
对于EX:
<div class="dropdown_button" class="menu_button" onClick="show_menu('dropdown_menu')">Schedule 1</div>
function show_menu(id){
var menu = document.getElementById(id);
if(menu.style.display == 'block'){
menu.style.display = 'none';
}else {
menu.style.display = 'block';
}
}
尝试使用'this':
function show_menu(this){
var menu = this.firstChild;
// or
// var menu = this.children[0];
if(menu.style.display == 'block'){
menu.style.display = 'none';
}else {
menu.style.display = 'block';
}
}
<nav>
<div class="dropdown_button" class="menu_button" onClick="show_menu(this)">Schedule 1</div>
<div id="dropdown_menu" class="hidden_menu">
<ul>
<li>option 1</li>
<li>option 2</li>
</ul>
</div>
<div class="dropdown_button" class="menu_button" onClick="show_menu(this)">Schedule 2</div>
<div id="dropdown_menu" class="hidden_menu">
<ul>
<li>option 3</li>
<li>option 4</li>
</ul>
</div>
</nav>