如果菜单关闭，子菜单的减号不会切换回加号 [英] Minus sign of submenu does not switch back to a plus sign if menu is closed

问题描述

我有以下jQuery菜单，也可以在JSfiddle 此处中找到>:

I have the following jQuery menu which you can also find in the 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>

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

The code above provides the following functionalities:

a)关闭/打开submenus时，加号/减号会更改.
b)当用户单击按钮1.0 Main Menu时，包括所有子菜单的整个菜单都将关闭
c)当用户单击屏幕上的某个位置时，包括所有sumbenus的整个菜单都将关闭

a) Plus/Minus sign changes when submenus are closed/opened.
b) When the user clicks on the button 1.0 Main Menu the entire menu including all submenus are closed
c) When the user clicks somewhere on the screen the entire menu including all sumbenus are closed

所有这些都已经完美地发挥了作用.

All this this works perfectly already.

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

Now when you do the following steps:

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

Step 1) Open all menus.
Step 2) Close 1.2 Sub Menu
Step 3) Open 1.2 Sub Menu again

1.2.2 Sub Menu将被关闭，但minus sign将保留并且不会切换回plus sign.

the 1.2.2 Sub Menu will be closed but the minus sign will stay and it will not switch back to a plus sign.

您是否知道我需要在代码中进行哪些更改才能使其正常工作?

Do you have any idea what I need to change in my code to make this work?

推荐答案

只需在下面的行之后添加$(this).next().find('li').removeClass('active');这行，就可以完成...

Just add this line $(this).next().find('li').removeClass('active'); after below line and you're done...

$(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>

这篇关于如果菜单关闭，子菜单的减号不会切换回加号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！