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>

到目前为止一切正常，但是如果我在菜单栏中再添加一个下拉集，它们就不起作用，因为 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>

我怎么解决这个问题？请帮帮我。谢谢

4

3 回答 3

2

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

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

于 2013-11-14T05:31:39.717 回答
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 回答
0

尝试将 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';                    
    }
}
于 2013-11-14T05:29:16.580 回答