jquery - 如果主菜单关闭/打开，则更改子菜单的加号/减号

Question

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

$(document).ready(function () {
    $(".main_menu_01, .main_menu_02").on('click', function () {
      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');
      }
    });
});

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

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

.main_menu_02 {
 padding-left: 5%;
 background: lime;
}

.sub_menu_01{
 padding-left: 1%;
 background: lime;
}

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="menu main_menu_01"> 1.0 Main Menu </li>
  <ul class="panel">
								
    <li class="sub_menu_01"> 1.1 Sub Menu </li>
					
    <li class="menu main_menu_02"> 1.2 Sub Menu </li>
      <ul class="panel">
        <li class="sub_menu_02"> <a> 1.2.1 Sub Menu </a> </li>
        <li class="sub_menu_02"> <a> 1.2.2 Sub Menu </a> </li>	
      </ul>	
  </ul>
  
  
  
<li class="menu main_menu_01"> 2.0 Main Menu </li>
  <ul class="panel">
								
    <li class="sub_menu_01"> 2.1 Sub Menu </li>
					
    <li class="menu main_menu_02"> 2.2 Sub Menu </li>
      <ul class="panel">
        <li class="sub_menu_02"> <a> 2.2.1 Sub Menu </a> </li>
        <li class="sub_menu_02"> <a> 2.2.2 Sub Menu </a> </li>	
      </ul>	
 </ul>

---

上面代码的问题是，当您打开所有 菜单时，每个主菜单都会将+ 符号更改为- 符号，即正是我想要的。

现在，当您关闭 1.0 Main Menu 时，submenu 的 - 符号和子菜单的 - 符号main menu 将更改为 + 符号，这也是我想要的。

但是，问题是当我关闭 1.0 Main Menu 时，2.0 Main Menu 的 - 符号也会更改为 + 符号，但它们应保留为 - 符号。

据我所知，出现此问题是因为代码行 $(this).hasClass('main_menu_01') 触发了所有具有 main_menu_01 的类。

但是，我还没有找到解决这个问题的方法。您知道我需要如何更改此代码才能使其正常工作吗？

Answer 1

首先，您可以只使用 .menu 类，因为它们都存在于两个菜单上，它发生变化的原因也是因为您使用 .menu该功能适用​​于两个菜单，您可以只使用 this 来应用您选择的菜单的功能。

$(document).ready(function () {
    $(".menu").on('click', function () {
      $(this).next('.panel').slideToggle();
      $(this).toggleClass('active');
      if(!$(this).hasClass('active')){
        $(this).next('.panel').find('.panel').slideUp(); $(this).next('.panel').find('.menu').removeClass('active');
      }
});   
});

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

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

.main_menu_02 {
 padding-left: 5%;
 background: lime;
}

.sub_menu_01{
 padding-left: 1%;
 background: lime;
}

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="menu main_menu_01"> 1.0 Main Menu </li>
  <ul class="panel">
								
    <li class="sub_menu_01"> 1.1 Sub Menu </li>
					
    <li class="menu main_menu_02"> 1.2 Sub Menu </li>
      <ul class="panel">
        <li class="sub_menu_02"> <a> 1.2.1 Sub Menu </a> </li>
        <li class="sub_menu_02"> <a> 1.2.2 Sub Menu </a> </li>	
      </ul>	
  </ul>
  
  
  
<li class="menu main_menu_01"> 2.0 Main Menu </li>
  <ul class="panel">
								
    <li class="sub_menu_01"> 2.1 Sub Menu </li>
					
    <li class="menu main_menu_02"> 2.2 Sub Menu </li>
      <ul class="panel">
        <li class="sub_menu_02"> <a> 2.2.1 Sub Menu </a> </li>
        <li class="sub_menu_02"> <a> 2.2.2 Sub Menu </a> </li>	
      </ul>	
 </ul>