1

クリック時にドロップダウンメニューを制御する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>

これまでのところすべて正常に動作していますが、メニュー バーにドロップダウン セットをもう 1 つ追加すると、ID="dropdown_menu" は別の要素ではなく 1 つの要素のみを対象としているため、機能しません。

<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>

どうすればこの問題を解決できますか? 手を貸してください。ありがとう

4

3 に答える 3

2

コードを見ると、両方の場所でIDが同じです<div id="dropdown_menu" class="hidden_menu">

異なる div には異なる ID を指定する必要があり、スクリプト内の div を識別するために JavaScript メソッドにパラメーターを渡すことができます。

于 2013-11-14T05:31:39.717 に答える
0

表示したいdivの引数としてIDを送信し、すべてのIDを一意のものに送信してみてください

function show_menu(id)

このようにhtmlを変更します

onClick="show_menu('IdOfTheDiv')"

例:

<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';                    
    }
}
于 2013-11-14T05:29:16.580 に答える
0

「これ」を使ってみてください：

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>
于 2013-11-14T05:24:55.473 に答える