CODEWITHSUNDEEP
javascriptjqueryhtml
hamed
hamed

Reputation: 13

target only li and ignore children

this is my html code with nesting li tags

<ul class="nav">
<li class="menu">
    <ul class="sub_nav">
        <li class="sub_menu"></li>
        <li class="sub_menu"></li>
    </ul>
</li>
<li class="menu">
    <ul class="sub_nav">
        <li class="sub_menu"></li>
        <li class="sub_menu"></li>
    </ul>
</li>
</ul>

how select only li tag with class menu and deselect children with class sub_menu

 jQuery("li.menu :not('li.sub_menu')").click(function(
            jQuery(this).toggleClass("active")
 })

Upvotes: 1

Views: 74

Answers (3)

H77
H77

Reputation: 5967

You can do something like this where you check if the item clicked is the selector element. If it isn't, you return false thereby stopping the event from bubbling up to the parent.

$("li.menu").click(function(event) {
  if (event.target !== this) {
    return false;
  }
  $(this).toggleClass("active");
});
li.menu.active {
  color: red;
}

li.sub_menu {
  color: initial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li class="menu">
    menu
    <ul class="sub_nav">
      <li class="sub_menu">submenu</li>
      <li class="sub_menu">submenu</li>
    </ul>
  </li>
  <li class="menu">
    menu
    <ul class="sub_nav">
      <li class="sub_menu">submenu</li>
      <li class="sub_menu">submenu</li>
    </ul>
  </li>
</ul>

Upvotes: 2

blurfus
blurfus

Reputation: 14031

I think you will have to define a default colour for the sub-menus via your CSS, like:

.menu, .sub_nav, .active .sub_nav{
  color: #555;
}

And then apply the active class only to the direct child of .nav.

That, and combining the JS code from @H77 (with targeting the click event to the top-level li) should do the trick.

See demo below:

$(function() {
  $(".nav > li.menu").click(function() {
    if (event.target !== this) {
      return false;
    }

    $(this).toggleClass("active");
  });
});
li.active.menu {
  color: red;
}

.menu,
.sub_nav,
.active .sub_nav {
  color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li class="menu">
    menu
    <ul class="sub_nav">
      <li class="sub_menu">submenu</li>
      <li class="sub_menu">submenu</li>
    </ul>
  </li>
  <li class="menu">
    menu
    <ul class="sub_nav">
      <li class="sub_menu">submenu</li>
      <li class="sub_menu">submenu</li>
    </ul>
  </li>
</ul>

Upvotes: 1

Kevin
Kevin

Reputation: 199

A simple solution:

$(".nav > li").click(function(){
    jQuery(this).toggleClass("active")
});

You will still be selecting the other li nodes, but only as children of the parent li, which I don't imagine is problematic.

Upvotes: 2

Related Questions