[英]OnClick -Dropdown Menu
I have a bit Javascript, which controls the drop down menu when it is on click 我有点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>
Here is HTML 这是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>
Here is a style 这是一种风格
<style>
.hidden_menu{display:none}
</style>
Everything works fine so far, but if I add one more dropdown set into the menu bar, they don't work because ID="dropdown_menu" is for only one element, not for another one. 到目前为止一切正常,但如果我在菜单栏中再添加一个下拉菜单,它们就不起作用,因为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>
How can I solve this problem? 我怎么解决这个问题? please give me a hand.
请帮我一把 Thanks
谢谢
As I look at the code, in both places the ID is the same <div id="dropdown_menu" class="hidden_menu">
当我查看代码时,在两个地方ID都相同
<div id="dropdown_menu" class="hidden_menu">
You should give different IDs for different divs and you can pass some parameter in the JavaScript method to identify the div inside the script. 您应该为不同的div提供不同的ID,您可以在JavaScript方法中传递一些参数来识别脚本中的div。
Try using 'this' : 尝试使用'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>
try to send the id as argument of the div you want to show and all ids to unique ones 尝试将id作为你要显示的div的参数发送,并将所有id发送给唯一的id
function show_menu(id)
change your html like this 像这样改变你的HTML
onClick="show_menu('IdOfTheDiv')"
For EX: 对于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';
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.