javascript OnClick - 下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19970133/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
OnClick -Dropdown Menu
提问by abcid d
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
我怎么解决这个问题？请帮我一把。谢谢
回答by Janny
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。
回答by Ankit Tyagi
Try using '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>
回答by Shadow
try to send the id as argument of the div you want to show and all ids to unique ones
尝试将 id 作为要显示的 div 的参数发送，并将所有 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';
}
}
