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时，-的{{1}}符号和submenu的{{1}}符号将变为{{1} }这也是我想要的方式。

但是，问题是当我选择-的{{1}}的{{1}}符号也将变为main menu的符号，但它们应保持为{{1 }} 标志。

据我所见出现此问题是因为代码行+触发了所有带有1.0 Main Menu的类。

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

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>

Answer 2

您正在从所有.menu元素中删除活动类。您只需要为单击的菜单和子菜单删除它。为此，您可以在这种情况下使用$(this).next()，然后使用find('.menu')。

$(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).next().find('.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>

Answer 3

删除$（'。menu'）。removeClass（'active'）。使用$（this）.find（'。menu'）。removeClass（'active'）。

Microsoft.CodeDom.Providers.DotNetCompilerPlatform

$(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') ? $(this).find('.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:'-';
}

如果主菜单已关闭/打开，则更改子菜单的正负号

3 个答案: