There is a problem:

<ul> <li> <ul> <li></li> </ul> </li> ....same blocks </ul>

When I click on the external li it gets the class "active". I press again - the class disappears. But when I press on the internal li, the class "active" still goes away. Help, how to make them react to clicks independently of each other?

Js

  $('.nav-cats li').click(function(){ if($(this).hasClass("active")) $(this).removeClass("active"); else $(this).addClass("active"); });

HTML

 <ul class="nav-cats"> <a href="#"><li> Home<br/><span class="quant-of-cats">(652547)</span> <ul> <a href="#"> <li>Subcat</li> </a> </ul> </li></a> </ul>

    1 answer 1

    Something like this: http://jsfiddle.net/IonDen/18mgskdf/

    HTML:

     <ul class='test'> <li>Top level <ul> <li>Second level</li> <li>Second level</li> </ul> </li> <li>Top level <ul> <li>Second level</li> <li>Second level</li> </ul> </li> </ul>

    CSS:

     .active { background: #eee; } .active .active { background: #f00; }

    Js:

     $('.test').find('li').on('click', function (event) { event.stopPropagation(); // запрещает событию подниматься выше $(this).toggleClass('active'); });
    • Thank you so much, it worked! - CodeFurious