OnClick -Dropdown菜单

Question

我有点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>

我该如何解决这个问题？请帮我一把 感谢

Answer 1

在我查看代码时，两个地方的ID都是相同的<div id="dropdown_menu" class="hidden_menu">

您应该为不同的div提供不同的ID，您可以在JavaScript方法中传递一些参数来识别脚本中的div。

Answer 2

尝试使用'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>

Answer 3

尝试将id作为要显示的div的参数发送，并将所有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';                    
    }
}