$('.burger_button').click(function() { $('.tabs-list').toggleClass('visible'); }); $(document).mouseup(function(event) { if ($(event.target).closest(".visible.tabs-list").length) return; $('.tabs-list').removeClass('visible'); //event.stopPropagation(); }); 
 .burger_button { padding: 0; z-index: 10; } .burger { display: block; height: 17px; } .burger span { display: block; } .sw-top { position: relative; top: 0; width: 28px; height: 2px; background: #4db936; border: none; } .sw-middle { position: relative; width: 28px; height: 2px; top: 6px; background: #4db936; } .sw-bottom { position: relative; width: 28px; height: 2px; top: 12px; background: #4db936; } .burger_button { padding: 3px; } .tabs-list { display: none; } .visible { display: block; border: 1px solid red; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="burger_button"> <span class="burger"> <span class="sw-top"></span> <span class="sw-middle"></span> <span class="sw-bottom"></span> </span> </button> <ul class="ionTabs__head tabs-list tabs-list__mobile"> <li class="tabs-item ionTabs__tab" data-target="Home">Home</li> <li class="tabs-item ionTabs__tab" data-target="Qualität">Qualität</li> <li class="tabs-item ionTabs__tab" data-target="Unsere">Unsere Leistungen</li> <li class="tabs-item ionTabs__tab" data-target="Pflegebedürftigkeit">Pflegebedürftigkeit</li> <li class="tabs-item ionTabs__tab" data-target="Stellenangebote">Stellenangebote</li> <li class="tabs-item ionTabs__tab" data-target="Wohngemeinschaften">Wohngemeinschaften</li> <li class="tabs-item ionTabs__tab" data-target="Impressum">Impressum</li> </ul>

I add a class by clicking on the button. In theory, it should be removed by clicking on the same button. However, there is a function that removes the class by clicking outside this block. Because of this, a second click on the button does nothing. I study jQuery, I want to understand that all switching options work.

 $('.burger_button').click(function(){ $('.tabs-list').toggleClass('visible'); }); $(document).mouseup(function(event) { if ($(event.target).closest(".visible .tabs-list").length) return; $('.tabs-list').removeClass('visible'); });
  • Add markup html + css - Cheg

2 answers 2

Slightly changed the condition in .mouseup() and added a check to .burger_button :

 $('.burger_button').click(function() { $('.tabs-list').toggleClass('visible'); }); $(document).mouseup(function(event) { if (!$(event.target).closest(".visible.tabs-list").length && !$(event.target).closest(".burger_button").length) { $('.tabs-list').removeClass('visible'); } }); 
 .burger_button { padding: 0; z-index: 10; } .burger { display: block; height: 17px; } .burger span { display: block; } .sw-top { position: relative; top: 0; width: 28px; height: 2px; background: #4db936; border: none; } .sw-middle { position: relative; width: 28px; height: 2px; top: 6px; background: #4db936; } .sw-bottom { position: relative; width: 28px; height: 2px; top: 12px; background: #4db936; } .burger_button { padding: 3px; } .tabs-list { display: none; } .visible { display: block; border: 1px solid red; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="burger_button"> <span class="burger"> <span class="sw-top"></span> <span class="sw-middle"></span> <span class="sw-bottom"></span> </span> </button> <ul class="ionTabs__head tabs-list tabs-list__mobile"> <li class="tabs-item ionTabs__tab" data-target="Home">Home</li> <li class="tabs-item ionTabs__tab" data-target="Qualität">Qualität</li> <li class="tabs-item ionTabs__tab" data-target="Unsere">Unsere Leistungen</li> <li class="tabs-item ionTabs__tab" data-target="Pflegebedürftigkeit">Pflegebedürftigkeit</li> <li class="tabs-item ionTabs__tab" data-target="Stellenangebote">Stellenangebote</li> <li class="tabs-item ionTabs__tab" data-target="Wohngemeinschaften">Wohngemeinschaften</li> <li class="tabs-item ionTabs__tab" data-target="Impressum">Impressum</li> </ul>

    Why did not you say on the robot)

     $('.burger_button').click(function() { if(!$('.tabs-list').hasClass('visible')) { $('.tabs-list').addClass('visible'); } else { $('.tabs-list').removeClass('visible'); } }); $(document).mouseup(function(e) { if ($(e.target).closest(".tabs-list").length || $(e.target).closest(".burger_button").length) { return } $('.tabs-list').removeClass('visible'); }); 
     .burger_button { padding: 0; z-index: 10; } .burger { display: block; height: 17px; } .burger span { display: block; } .sw-top { position: relative; top: 0; width: 28px; height: 2px; background: #4db936; border: none; } .sw-middle { position: relative; width: 28px; height: 2px; top: 6px; background: #4db936; } .sw-bottom { position: relative; width: 28px; height: 2px; top: 12px; background: #4db936; } .burger_button { padding: 3px; } .tabs-list { display: none; } .visible { display: block; border: 1px solid red; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="burger_button"> <span class="burger"> <span class="sw-top"></span> <span class="sw-middle"></span> <span class="sw-bottom"></span> </span> </button> <ul class="ionTabs__head tabs-list tabs-list__mobile"> <li class="tabs-item ionTabs__tab" data-target="Home">Home</li> <li class="tabs-item ionTabs__tab" data-target="Qualität">Qualität</li> <li class="tabs-item ionTabs__tab" data-target="Unsere">Unsere Leistungen</li> <li class="tabs-item ionTabs__tab" data-target="Pflegebedürftigkeit">Pflegebedürftigkeit</li> <li class="tabs-item ionTabs__tab" data-target="Stellenangebote">Stellenangebote</li> <li class="tabs-item ionTabs__tab" data-target="Wohngemeinschaften">Wohngemeinschaften</li> <li class="tabs-item ionTabs__tab" data-target="Impressum">Impressum</li> </ul>

    • Your option doesn't work - Cheg
    • @Cheg know. I'm fixing. - Tsyklop