The second time the event does not work by clicking on the active element. What could be the reason, tell me, please?

$('.products-grid-header li.active-items').on('click', function() { $('.products-grid-header-item').show(); $('.products-grid-header-item').click(function() { $('.products-grid-header li.active-items').removeClass('active-items'); $(this).addClass('active-items'); $('.products-grid-header li:not(.active-items)').each(function() { $(this).hide(); }); }); }); 
 .products-grid-header li:not(.active-items){ display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="products-grid-header"> <li class="products-grid-header-item active-items"> <a class="" href="#1">1</a> </li> <li class="products-grid-header-item"> <a class="" href="#2">2</a> </li> <li class="products-grid-header-item"> <a class="" href="#3">3</a> </li> <li class="products-grid-header-item"> <a class="" href="#4">4</a> </li> <li class="products-grid-header-item"> <a class="" href="#5">5</a> </li> <li class="products-grid-header-item"> <a class="" href="#6">6</a> </li> </ul>

  • one
    But why should one more Kli in the clique be taken out separately ? Sasuke
  • By the first click, a menu opens, a second click will assign the class active-items to the selected item, and hide the rest (display: none). - EvgeniaM

1 answer 1

The click works, but the second handler immediately hides the elements. Consider this option

 $('.products-grid-header-item').on('click', function() { $('.products-grid-header-item').toggle(); $(this).show() }) 
 .products-grid-header li:not(.active-items) { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="products-grid-header"> <li class="products-grid-header-item active-items"> <a class="" href="#1">1</a> </li> <li class="products-grid-header-item"> <a class="" href="#2">2</a> </li> <li class="products-grid-header-item"> <a class="" href="#3">3</a> </li> <li class="products-grid-header-item"> <a class="" href="#4">4</a> </li> <li class="products-grid-header-item"> <a class="" href="#5">5</a> </li> <li class="products-grid-header-item"> <a class="" href="#6">6</a> </li> </ul>

  • What a simple solution) thanks a lot, everything works as it should! - EvgeniaM
  • How can you make the menu fall out more smoothly? I add to toggle ('slow') and the first element disappears, if we add the same property to show (), then the first element disappears smoothly first, and then smoothly appears, with a delay. Altered a little function to add the necessary class for styles: $ ('. Products-grid-header-item'). On ('click', function () {$ ('. Products-grid-header-item'). Toggle (); $ ('. products-grid-header li.active-items'). removeClass ('active-items'); $ (this) .show (); $ (this) .addClass ('active-items' );}); - EvgeniaM