jquery slideToggle 不会返回到原始设置

Question

我开发了以下简单的 jQuery 菜单:

$(document).ready(function () {
    $(".button, .button_menu_01").on('click', function () {
        $(this).next('.panel').slideToggle(500);
        $(this).toggleClass('active');
    });
});

.button {
     width: 50px;
     height: 50px;
     float: right;
     background-color: fuchsia;
}

.panel { 
     width: 100%;
     padding-left: 0%;
     font-weight: bold;
     overflow: hidden;
     display:none;
}

.button_menu_01 {
     padding-left: 1%;
     background: blue;
}

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


<div class="button">Menu</div>
<div class="panel">	
    <div class="button_menu_01">1.0 Main Menu</div>
    <div class="panel">
        <div>1.1 Sub Menu</div>	
        <div class="button_menu_01">1.2 Sub Menu</div>
        <div class="panel">
            <div> 1.2.1 Sub Menu</div>
            <div> 1.2.2 Sub Menu</div> 	
        </div>
    </div>
</div>

您还可以找到 jsfiddle here .
到目前为止，所有这些工作正常。

---

现在，当我浏览菜单直到 1.2.1 Sub Menu 和 1.2.2 Sub Menu 之后，我单击主菜单 .button 整个菜单折叠。现在，我再次单击主菜单 .button，整个菜单展开包括所有子菜单。

我的目标是，一旦按下主菜单 .button 折叠整个菜单，它就会恢复到原来的设置，所以一旦你再次点击它只会显示 1.0 Main Menu 就像您第一次点击它时一样。

我必须更改我的代码才能实现此目标吗？

Answer 1

您需要根据您的面板当前是事件的还是非事件的来调整您的代码以执行略有不同的事情:

$(document).ready(function() {
  $(".button, .button_menu_01").on('click', function() {
    // Grab the associated panel
    var $panel = $(this).next('.panel');

    // If it's visible, hide it as well as all its subpanels
    if ($panel.is(':visible')) {
      $panel.add($panel.find('.panel')).slideUp(500).removeClass('active');
    } 
    // Otherwise, simply show it
    else {
      $panel.slideDown(500).addClass('active');
    }
  });
});

.button {
  width: 50px;
  height: 50px;
  float: right;
  background-color: fuchsia;
}

.panel {
  width: 100%;
  padding-left: 0%;
  font-weight: bold;
  overflow: hidden;
  display: none;
}

.button_menu_01 {
  padding-left: 1%;
  background: blue;
}

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


<div class="button">Menu</div>
<div class="panel">

  <div class="button_menu_01">1.0 Main Menu</div>
  <div class="panel">

    <div>1.1 Sub Menu</div>

    <div class="button_menu_01">1.2 Sub Menu</div>
    <div class="panel">

      <div> 1.2.1 Sub Menu</div>
      <div> 1.2.2 Sub Menu</div>

    </div>

  </div>

</div>