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發送給唯一的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';                    
    }
}