javascript - 如何更改此按钮/菜单列表，以便一次只能看到一个菜单？

Question

这是我的代码:

$(document).ready(function(){
    $(".btn1").click(function(){
        $(".menu1").toggle();
    });
    $(".btn2").click(function(){
        $(".menu2").toggle();
    });
    $(".btn3").click(function(){
        $(".menu3").toggle();
    });
    $(".btn4").click(function(){
        $(".menu4").toggle();
    });
});

#button{
    height : 35px;
    line-height : 35px;
    text-align : center;
    background-color : grey;
    border-top : 2px solid white;
    border-bottom : 2px solid white;
}
#menu_to_show{
    border: 2px solid orange;
    height : 50px;
}
.menu1, .menu2, .menu3, .menu4{ display : none; }

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<div id="button" class="btn1">Button 1</div>
<div id="menu_to_show" class="menu1">
    This is text which belong to button 1.
</div>
<div id="button" class="btn2">Button 2</div>
<div id="menu_to_show" class="menu2">
    This is another text. This appear after you click on button 2.
</div>
<div id="button" class="btn3">Button 3</div>
<div id="menu_to_show" class="menu3">
    Some text under button 3.
</div>
<div id="button" class="btn4">Button 4</div>
<div id="menu_to_show" class="menu4">
    Some text under button 4. <br/>
    New line of last text.
</div>

例如:我点击按钮2，所以我打开菜单2。当我点击按钮3时，我打开菜单3，但之前的菜单2仍然打开。

如果我想在点击按钮时关闭其他菜单，该怎么办？

Answer 1

例如，您可以这样做:

$(document).ready(function(){
    $(".btn1").click(function(){
        $('#menu_to_show').not('.menu1').hide();
        $(".menu1").toggle();
    });
    $(".btn2").click(function(){                  
        $('#menu_to_show').not('.menu2').hide();
        $(".menu2").toggle();
    });
    $(".btn3").click(function(){
        $('#menu_to_show').not('.menu3').hide();
        $(".menu3").toggle();
    });
    $(".btn4").click(function(){
        $('#menu_to_show').not('.menu4').hide();
        $(".menu4").toggle();
    });
});

虽然我建议使用类而不是 ID，但更常见。