Reaction only when clicked on external li

[Anderson]

There's a problem:

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

When I press the outside li, he gets the "active" class. Once again, the class is gone. But when I press an internal li, the "active" class still goes. Help me, how do they react to the cages 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>

[charlenef]

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');
});