如何更改此 buttons/menus 列表，以便一次只能看到一个菜单？

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，但更常见。

Answer 2

您没有关闭打开的 div 的代码

此外，HTML 元素的 ID 应该是唯一的，并且 class 名称应该与多个元素共享。您的代码似乎翻转了此 concept.I 已在您的 HTML 和 CSS 代码中更正了此问题。正确编码的 HTML 和 CSS 会缩短您的脚本并使您的维护工作变得更加容易。

$(document).ready(function() {
  $(".btn").click(function() {
    //hide all the open div's
    $('.menu').filter(function(e) {
      return $(this).css("display") == "block";
    }).toggle();
    //open the correct div now
    $(this).next('.menu:first').toggle();
  });
});

.btn {
  height: 35px;
  line-height: 35px;
  text-align: center;
  background-color: grey;
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}
.menu {
  border: 2px solid orange;
  height: 50px;
}
.menu {
  display: none;
}

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

<div id="button1" class="btn">Button 1</div>
<div id="menu_to_show1" class="menu">
  This is text which belong to button 1.
</div>
<div id="button2" class="btn">Button 2</div>
<div id="menu_to_show2" class="menu">
  This is another text. This appear after you click on button 2.
</div>
<div id="button3" class="btn">Button 3</div>
<div id="menu_to_show3" class="menu">
  Some text under button 3.
</div>
<div id="button4" class="btn">Button 4</div>
<div id="menu_to_show4" class="menu">
  Some text under button 4.
  <br/>New line of last text.
</div>

如何更改此 buttons/menus 列表，以便一次只能看到一个菜单？

How can I change this list of buttons/menus so that only one menu is visible at a time?

javascript

toggle