How to make a click on the menu header expand the submenu, and also close when clicked?

  • one
    What did you try to do and what did you fail to do? - Alex
  • If you are given an exhaustive answer, please mark the appropriate answer as the solution to your question (the green checkbox under the number to the left of the answer text). - Alex

5 answers 5

Option with toggle () .

Toggles the display mode of each item in the set. If an item is hidden, this function displays it (using the show method); if the element is visible - hides it (using the hide method).

$(function() { $('.menu').click(function(e) { e.preventDefault(); $('.submenu').toggle(); }); }); 
 .submenu{display:none;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="" title="" class="menu">Я еще один пункт меню</a> <ul class="submenu"> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> </ul>

Option to add a class

 $(function() { $('.menu').click(function() { if($('.submenu').hasClass('a')){ $('.submenu').removeClass('a'); }else{ $('.submenu').addClass('a'); }; return false; }); }); 
 .submenu {display:none;} .submenu.a {display:block;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="" class="menu">Я пункт меню :)</a> <ul class="submenu"> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> </ul>

  • It's easier toggleClass . And in jQuery UI there is even a version of the toggleClass method with various animations. - Vadim Ovchinnikov

For example toggleClass :

 $('.trigger').on('click', function(e){ e.preventDefault(); $('#js-menu').toggleClass('open'); }); 
 #js-menu { display: none; } #js-menu.open { display: block; } 
 <script src="https://code.jquery.com/jquery-2.0.3.js"></script> <button class="trigger"> &#926;</button> <ul id="js-menu"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>

Or slideToggle :

 $('.trigger').on('click', function(e){ e.preventDefault(); $('#js-menu').slideToggle(); }); 
 #js-menu { display: none; } 
 <script src="https://code.jquery.com/jquery-2.0.3.js"></script> <button class="trigger"> &#926;</button> <ul id="js-menu"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>

  • The main thing then do not forget that the signature .toggleClass( [state ] ) - is deprecated as of jQuery 3.0. - Alexey Shimansky

The option without using classes, without additional markup, without CSS, without jQuery is pure JS.

 var button = document.querySelector('button'), ul = document.querySelector('ul'); ul.setAttribute('hidden', true); button.addEventListener('click', function() { if ( ul.getAttribute('hidden') ) { ul.removeAttribute('hidden'); } else { ul.setAttribute('hidden', true); } }); 
 <button>click me</button> <ul> <li>ololo 1 <li>ololo 2 <li>ololo 3 </ul>

    On pure js -

     let nav = document.body.querySelector('.nav'); nav.addEventListener('click', nav_clickHandler); function nav_clickHandler( {target} ){ if( target.classList.contains('dropdown') ){ let item = target.parentNode.querySelector(`[data-target="${target.dataset.toogle}"]`); let state = item.dataset.active; item.dataset.active = state === "true" ? false : true; } } 
     ul { list-style: none; padding: 0; } [data-active="false"] { height: 0; overflow: hidden; } 
     <ul class="nav"> <li> <span class="dropdown" data-toogle="first">first</span> <ul data-target="first" data-active="false"> <li><span>first 1</span></li> <li><span>first 1</span></li> </ul> </li> <li> <span class="dropdown" data-toogle="second">second</span> <ul data-target="second" data-active="false"> <li><span>second 1</span></li> <li><span>second 1</span></li> </ul> </li> </ul>

    On pure css (it is not advised in comments and I agree with it, but I will leave it)

     ul { list-style: none; padding: 0; } input[type="checkbox"]:not(:checked) + ul { height: 0; overflow: hidden; } 
     <ul> <li> <label for="first-section">first</label> <input type="checkbox" id="first-section" hidden> <ul class="slider"> <li><span>first 1</span></li> <li><span>first 2</span></li> </ul> </li> <li> <label for="second-section">second</label> <input type="checkbox" id="second-section" hidden> <ul class="slider"> <li><span>second 1</span></li> <li><span>second 2</span></li> </ul> </li> </ul>

    • creepy way for menu \ navigation) - HamSter
    • @Alex and I just do not know, I showed it as an option. - user220409
    • @Elena for me is no less terrible to use jq in 2017 :) - user220409
    • @OlmerDale are you from the future? - Alexey Shimansky
    • @ Alexey Shimansky, if you are not talking about a few days error, then I really think that using jq is a few steps back. For several years now, the problem with browser support has been completely resolved and js has become better than jq. To use it today means to delete the point about self-development for the future. - user220409