J'ai le menu jQuery suivant que vous pouvez également trouver dans JSfiddle ici:

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

Mon problème avec le code ci-dessus est que lorsque vous ouvrez tous les menus, chaque menu principal change le signe + en signe -, ce qui correspond exactement à ce que je veux.

Désormais, lorsque vous fermez 1.0 Main Menu, le signe - du submenu et le signe - du main menu seront remplacés par un signe + qui est aussi exactement ce que je veux.

Cependant, le problème est que lorsque je ferme 1.0 Main Menu, les signes - de 2.0 Main Menu se transforment également en signe + mais ils doivent rester en tant que signe - .

Autant que je puisse voir, ce problème apparaît parce que la ligne de code $(this).hasClass('main_menu_01') déclenche toutes les classes avec main_menu_01.

Cependant, je n'ai pas encore trouvé de moyen de résoudre ce problème. Avez-vous une idée de la manière dont je dois modifier ce code pour qu'il fonctionne?

1
Michi 20 nov. 2018 à 10:22

3 réponses

Meilleure réponse

Vous supprimez la classe active de tous les éléments .menu. Vous devez le supprimer uniquement pour le menu cliqué et les sous-menus. Pour cela, vous pouvez utiliser $(this).next() puis find('.menu') dans ce contexte.

$(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>
0
Itay Gal 20 nov. 2018 à 07:43

Tout d'abord, vous pouvez simplement utiliser la classe .menu car ils existent tous les deux dans les deux menus, la raison pour laquelle cela change aussi est que, vous utilisez .menu dont la fonction s'applique aux deux menus, vous pouvez simplement utiliser this pour appliquer la fonction de votre menu sélectionné.

$(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>
1
user123 20 nov. 2018 à 07:54

Supprimer $ ('. Menu'). RemoveClass ('active'). Utilisez $ (this) .find ('. Menu'). RemoveClass ('active').

$(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:'-';
}
<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>
0
Ismail Rubad 20 nov. 2018 à 07:47