Change plus/minus sign of submenus if main menu is closed/opened

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

My issue with the code above is that when you open all menus each main menu changes the + sign to a - sign which is exactly how I want it.

Now when you close 1.0 Main Menu the - sign of the submenu and the - sign of the main menu will be changed to a + sign which is also exaclty how I want it.

However, the issue is that when I clsoe 1.0 Main Menu the - signs of 2.0 Main Menu will also change to a + sign but they should stay as a - sign.

As far as I can see this problem appears because the code line $(this).hasClass('main_menu_01') triggers all classes with main_menu_01.

However, I could not find a way to solve this issue yet. Do you have any idea how I need to change this code to make it work?

asked Nov 20 at 7:22

Michi

1,0901022

add a comment |

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

My issue with the code above is that when you open all menus each main menu changes the + sign to a - sign which is exactly how I want it.

Now when you close 1.0 Main Menu the - sign of the submenu and the - sign of the main menu will be changed to a + sign which is also exaclty how I want it.

However, the issue is that when I clsoe 1.0 Main Menu the - signs of 2.0 Main Menu will also change to a + sign but they should stay as a - sign.

As far as I can see this problem appears because the code line $(this).hasClass('main_menu_01') triggers all classes with main_menu_01.

However, I could not find a way to solve this issue yet. Do you have any idea how I need to change this code to make it work?

asked Nov 20 at 7:22

Michi

1,0901022

add a comment |

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

My issue with the code above is that when you open all menus each main menu changes the + sign to a - sign which is exactly how I want it.

Now when you close 1.0 Main Menu the - sign of the submenu and the - sign of the main menu will be changed to a + sign which is also exaclty how I want it.

However, the issue is that when I clsoe 1.0 Main Menu the - signs of 2.0 Main Menu will also change to a + sign but they should stay as a - sign.

As far as I can see this problem appears because the code line $(this).hasClass('main_menu_01') triggers all classes with main_menu_01.

However, I could not find a way to solve this issue yet. Do you have any idea how I need to change this code to make it work?

asked Nov 20 at 7:22

Michi

1,0901022

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

My issue with the code above is that when you open all menus each main menu changes the + sign to a - sign which is exactly how I want it.

Now when you close 1.0 Main Menu the - sign of the submenu and the - sign of the main menu will be changed to a + sign which is also exaclty how I want it.

However, the issue is that when I clsoe 1.0 Main Menu the - signs of 2.0 Main Menu will also change to a + sign but they should stay as a - sign.

As far as I can see this problem appears because the code line $(this).hasClass('main_menu_01') triggers all classes with main_menu_01.

However, I could not find a way to solve this issue yet. Do you have any idea how I need to change this code to make it work?

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

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

jquery html css

asked Nov 20 at 7:22

Michi

1,0901022

asked Nov 20 at 7:22

Michi

1,0901022

asked Nov 20 at 7:22

Michi

1,0901022

asked Nov 20 at 7:22

Michi

1,0901022

asked Nov 20 at 7:22

Michi

1,0901022

add a comment |

3 Answers
3

active

oldest

votes

You're removing the active class from all the .menu elements. You need to remove it only for the clicked menu and the sub menus. For that you can use $(this).next() and then find('.menu') in that context.

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

answered Nov 20 at 7:43

Itay Gal

7,19352559

Thanks man. Exactly the solution I needed.
– Michi
Nov 20 at 7:48

By the way. Do you have any idea for this issue: stackoverflow.com/questions/53378091/…
– Michi
Nov 20 at 7:58

add a comment |

First, you can just use the .menu class since they are both exist on both menus, the thing why it changes also is because, you use .menu which the function applies to both menu, you can just use this to apply the function your selected menu.

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

edited Nov 20 at 7:54

answered Nov 20 at 7:27

user123

19412

Thanks for your answer but it does not fully work. When I open 1.0 Main Menu and then 1.2 Sub Menu and after that I click again on 1.0 Main Menu there will be a minus sign on 1.2 Sub Menu although it should be a plus sign because it is closed.
– Michi
Nov 20 at 7:30

@Michi I update it again
– user123
Nov 20 at 7:54

add a comment |

Remove $('.menu').removeClass('active') . Use $(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>

answered Nov 20 at 7:47

Ismail Rubad

7291621

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388087%2fchange-plus-minus-sign-of-submenus-if-main-menu-is-closed-opened%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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

answered Nov 20 at 7:43

Itay Gal

7,19352559

Thanks man. Exactly the solution I needed.
– Michi
Nov 20 at 7:48

By the way. Do you have any idea for this issue: stackoverflow.com/questions/53378091/…
– Michi
Nov 20 at 7:58

add a comment |

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

answered Nov 20 at 7:43

Itay Gal

7,19352559

Thanks man. Exactly the solution I needed.
– Michi
Nov 20 at 7:48

By the way. Do you have any idea for this issue: stackoverflow.com/questions/53378091/…
– Michi
Nov 20 at 7:58

add a comment |

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

answered Nov 20 at 7:43

Itay Gal

7,19352559

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

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

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

answered Nov 20 at 7:43

Itay Gal

7,19352559

answered Nov 20 at 7:43

Itay Gal

7,19352559

answered Nov 20 at 7:43

Itay Gal

7,19352559

answered Nov 20 at 7:43

Itay Gal

7,19352559

Thanks man. Exactly the solution I needed.
– Michi
Nov 20 at 7:48

By the way. Do you have any idea for this issue: stackoverflow.com/questions/53378091/…
– Michi
Nov 20 at 7:58

add a comment |

Thanks man. Exactly the solution I needed.
– Michi
Nov 20 at 7:48

By the way. Do you have any idea for this issue: stackoverflow.com/questions/53378091/…
– Michi
Nov 20 at 7:58

Thanks man. Exactly the solution I needed.
– Michi
Nov 20 at 7:48

By the way. Do you have any idea for this issue: stackoverflow.com/questions/53378091/…
– Michi
Nov 20 at 7:58

add a comment |

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

edited Nov 20 at 7:54

answered Nov 20 at 7:27

user123

19412

Thanks for your answer but it does not fully work. When I open 1.0 Main Menu and then 1.2 Sub Menu and after that I click again on 1.0 Main Menu there will be a minus sign on 1.2 Sub Menu although it should be a plus sign because it is closed.
– Michi
Nov 20 at 7:30

@Michi I update it again
– user123
Nov 20 at 7:54

add a comment |

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

edited Nov 20 at 7:54

answered Nov 20 at 7:27

user123

19412

Thanks for your answer but it does not fully work. When I open 1.0 Main Menu and then 1.2 Sub Menu and after that I click again on 1.0 Main Menu there will be a minus sign on 1.2 Sub Menu although it should be a plus sign because it is closed.
– Michi
Nov 20 at 7:30

@Michi I update it again
– user123
Nov 20 at 7:54

add a comment |

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

edited Nov 20 at 7:54

answered Nov 20 at 7:27

user123

19412

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

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

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

edited Nov 20 at 7:54

answered Nov 20 at 7:27

user123

19412

edited Nov 20 at 7:54

answered Nov 20 at 7:27

user123

19412

answered Nov 20 at 7:27

user123

19412

answered Nov 20 at 7:27

user123

19412

Thanks for your answer but it does not fully work. When I open 1.0 Main Menu and then 1.2 Sub Menu and after that I click again on 1.0 Main Menu there will be a minus sign on 1.2 Sub Menu although it should be a plus sign because it is closed.
– Michi
Nov 20 at 7:30

@Michi I update it again
– user123
Nov 20 at 7:54

add a comment |

Thanks for your answer but it does not fully work. When I open 1.0 Main Menu and then 1.2 Sub Menu and after that I click again on 1.0 Main Menu there will be a minus sign on 1.2 Sub Menu although it should be a plus sign because it is closed.
– Michi
Nov 20 at 7:30

@Michi I update it again
– user123
Nov 20 at 7:54

Thanks for your answer but it does not fully work. When I open 1.0 Main Menu and then 1.2 Sub Menu and after that I click again on 1.0 Main Menu there will be a minus sign on 1.2 Sub Menu although it should be a plus sign because it is closed.
– Michi
Nov 20 at 7:30

@Michi I update it again
– user123
Nov 20 at 7:54

add a comment |

Remove $('.menu').removeClass('active') . Use $(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>

answered Nov 20 at 7:47

Ismail Rubad

7291621

add a comment |

Remove $('.menu').removeClass('active') . Use $(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>

answered Nov 20 at 7:47

Ismail Rubad

7291621

add a comment |

Remove $('.menu').removeClass('active') . Use $(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>

answered Nov 20 at 7:47

Ismail Rubad

7291621

Remove $('.menu').removeClass('active') . Use $(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>

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

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

answered Nov 20 at 7:47

Ismail Rubad

7291621

answered Nov 20 at 7:47

Ismail Rubad

7291621

answered Nov 20 at 7:47

Ismail Rubad

7291621

answered Nov 20 at 7:47

Ismail Rubad

7291621

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Nsryjdtyk