jquery - 如果菜单关闭，子菜单的减号不会切换回加号

Question

我有以下 jQuery 菜单，您也可以在 JSfiddle 中找到它 here :

$(document).ready(function () {
    $(".main_menu_01, .main_menu_02, .main_menu_03, .panel").on('click', function (e) {
    	e.stopPropagation();
      var $panel = $(this).next('.panel');
      if ($panel.is(':visible')) {
        $panel.add($panel.find('.panel')).slideUp(500);
        $(this).hasClass("main_menu_01") ? $('.menu').removeClass('active') : $(this).removeClass('active');
      } else {
        $panel.slideDown(500);
        $(this).addClass('active');
      }
    });
    
    $("body").on('click', function () {
      var $panel = $('.panel');
      if ($panel.is(':visible')) {
        $panel.add($panel.find('.panel')).slideUp(500);
        $('main_menu_01').removeClass('active');
        $('.menu').removeClass('active');
      }
    });
});

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

.main_menu_01 {
 background: blue;
}

.main_menu_02 {
 background: lime;
}

.main_menu_03 {
 background: brown;
 padding-left: 10%;
}


.sub_menu_01{
 background: lime;
}

.sub_menu_02{
 background: lime;
 padding-left: 10%;
}

.sub_menu_03{
 background: orange;
 padding-left: 15%;
}


 .main_menu_01:before, .main_menu_02:before, .main_menu_03:before {
 content:'+';
 width:20px;
 display:inline-block;
}

.main_menu_01.active:before, .main_menu_02.active:before, .main_menu_03.active:before {
 content:'-';
}

.content {
  margin-top: 5%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="main_menu_01 menu"> 1.0 Main Menu </li>
  <ul class="panel">
								
    <li class="sub_menu_01"> &nbsp; &nbsp; &nbsp; 1.1 Sub Menu </li>
					
    <li class="main_menu_02 menu"> 1.2 Sub Menu </li>
      <ul class="panel">
        <li class="sub_menu_02"> 
        <a> &nbsp; &nbsp; &nbsp; 1.2.1 Sub Menu </a> 
        </li>
        <li class="main_menu_03 menu"> <a> 1.2.2 Sub Menu </a> </li>
          <ul class="panel">
            <li class="sub_menu_03">
            <a> &nbsp; &nbsp; &nbsp; 1.2.2.1 Sub Menu </a> 
            </li>
            <li class="sub_menu_03">
            <a> &nbsp; &nbsp; &nbsp; 1.2.2.2 Sub Menu </a>
            </li>
           </ul>
        
      </ul>	
      
  </ul>
  
  
<div class="content">
<p>Content goes here</p>
</div>

上面的代码提供了以下功能:

a) 当 submenus 关闭/打开时，加号/减号改变。
b) 当用户点击按钮 1.0 Main Menu 时，包括所有子菜单的整个菜单都关闭了
c) 当用户点击屏幕上的某处时，包括所有 sumbenus 在内的整个菜单都会关闭

所有这一切已经完美地工作了。

---

现在，当您执行以下步骤时:

步骤 1) 打开所有菜单。
步骤 2) 关闭 1.2 子菜单
步骤 3) 再次打开 1.2 子菜单

1.2.2 子菜单 将关闭，但减号 将保留并且不会切换回加号。

您是否知道我需要更改代码中的哪些内容才能使其正常工作？

Answer 1

只需在下面的行之后添加此行 $(this).next().find('li').removeClass('active'); 即可...

$(this).hasClass("main_menu_01") ? $('.menu').removeClass('active') : $(this).removeClass('active');

$(document).ready(function () {
    $(".main_menu_01, .main_menu_02, .main_menu_03, .panel").on('click', function (e) {
    	e.stopPropagation();
      var $panel = $(this).next('.panel');
      if ($panel.is(':visible')) {
        $panel.add($panel.find('.panel')).slideUp(500);
        $(this).hasClass("main_menu_01") ? $('.menu').removeClass('active') : $(this).removeClass('active');
        $(this).next().find('li').removeClass('active');
      } else {
        $panel.slideDown(500);
        $(this).addClass('active');
      }
    });
    
    $("body").on('click', function () {
      var $panel = $('.panel');
      if ($panel.is(':visible')) {
        $panel.add($panel.find('.panel')).slideUp(500);
        $('main_menu_01').removeClass('active');
        $('.menu').removeClass('active');
      }
    });
});

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

.main_menu_01 {
 background: blue;
}

.main_menu_02 {
 background: lime;
}

.main_menu_03 {
 background: brown;
 padding-left: 10%;
}


.sub_menu_01{
 background: lime;
}

.sub_menu_02{
 background: lime;
 padding-left: 10%;
}

.sub_menu_03{
 background: orange;
 padding-left: 15%;
}


 .main_menu_01:before, .main_menu_02:before, .main_menu_03:before {
 content:'+';
 width:20px;
 display:inline-block;
}

.main_menu_01.active:before, .main_menu_02.active:before, .main_menu_03.active:before {
 content:'-';
}

.content {
  margin-top: 5%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="main_menu_01 menu"> 1.0 Main Menu </li>
  <ul class="panel">
								
    <li class="sub_menu_01"> &nbsp; &nbsp; &nbsp; 1.1 Sub Menu </li>
					
    <li class="main_menu_02 menu"> 1.2 Sub Menu </li>
      <ul class="panel">
        <li class="sub_menu_02"> 
        <a> &nbsp; &nbsp; &nbsp; 1.2.1 Sub Menu </a> 
        </li>
        <li class="main_menu_03 menu"> <a> 1.2.2 Sub Menu </a> </li>
          <ul class="panel">
            <li class="sub_menu_03">
            <a> &nbsp; &nbsp; &nbsp; 1.2.2.1 Sub Menu </a> 
            </li>
            <li class="sub_menu_03">
            <a> &nbsp; &nbsp; &nbsp; 1.2.2.2 Sub Menu </a>
            </li>
           </ul>
        
      </ul>	
      
  </ul>
  
  
<div class="content">
<p>Content goes here</p>
</div>