Reaction only when clicked on external li



  • 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>



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



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2