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

你没有关闭open div的代码

此外，HTML元素的id应该是唯一的，并且类名应该与多个元素共享。你的代码似乎已经颠覆了这个概念。我已经在你的HTML和CSS代码中纠正了这个问题。正确编码的HTML＆amp; 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>

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

2 个答案: