jquery - 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 这里找到。
到目前为止，所有这些工作都很好。

---

现在，当我钻取菜单直到1.2.1 Sub Menu然后1.2.2 Sub Menu单击主菜单.button时，整个菜单都会崩溃。现在我再次单击主菜单.button，整个菜单展开，包括all Sub Menus。

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

我必须在我的代码中进行哪些更改才能实现这一目标？

标签： jqueryhtmlcss

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>