CODEWITHSUNDEEP
jquery
rob.m
rob.m

Reputation: 10571

Add class to clicked item, parent and grand parent and remove it from all the rest

This is the html structure

<ul>
  <li>
    <a href="#">Stone age</a> > active
    <ul>
      <li>
        <a href="#">Mesolithic</a> > active
        <ul>
          <li>
            <a href="#">Culture</a> > active
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Neolithic</a> > not active > click > this active the others not active
      </li>
    </ul>
  </li>
</ul>

When I click on the third level, the first level looses the class active, when I click on the other element with no siblings or parent, it gets the class active but doesn't remove it from the previous clicked items.

$("a").on("click", function(e) {
    e.preventDefault();
    var $parent = $(this).parent().parent().parent().find("a");
    $("a").not($parent).not($parent.nextAll()).removeClass("active");
    $(this).toggleClass("active");
    $(this).nextAll("ul").toggleClass("closed opened");
});

jsFiddle

How do i toggle the class "active" between siblings, parents and other elements?

Upvotes: 0

Views: 881

Answers (2)

caramba
caramba

Reputation: 22480

Something like this:

$("#myId a").on("click", function(e) {
    e.preventDefault();
  
    // first remove all active classes
    $(this).closest('#myId').find('a.active').removeClass('active');

    // from the clicked item ($(this)) add "active" to all parents with children <a> 
    $(this).parents().children('li a').addClass('active');
});
.active {
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="myId">
  <li>
    <a class="active">Stone age</a> > active
    <ul>
     <li>
       <a class="active">Mesolithic</a> > active
       <ul>
         <li>
           <a class="active">Culture</a> > active
         </li>
       </ul>
     </li>
     <li>
       <a>Neolithic</a>
       <ul>
     <li>
       <a>Mesolithic</a>
       <ul>
         <li>
           <a>Culture</a>
         </li>
       </ul>
     </li>
     <li>
       <a>Neolithic</a>
     </li>
    </ul>
     </li>
    </ul>
  </li>
</ul>

Upvotes: 3

Anthony Grist
Anthony Grist

Reputation: 38345

If you can add an id (or other method of uniquely identifying) to the top level UL element this becomes a fair amount easier. One way to do it would be as below:

$(function() {
	$('#menu a').on('click', function(e) {
		e.preventDefault();
		$('#menu a').removeClass('active');
		$(this).addClass('active').parents('li').parents('li').children('a').addClass('active').end().parents('li').children('a').addClass('active');
	});
});
.active {
	color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
  <li>
    <a>Stone age</a>
    <ul>
     <li>
       <a>Mesolithic</a>
       <ul>
         <li>
           <a>Culture</a>
         </li>
       </ul>
     </li>
     <li>
       <a>Neolithic</a>
     </li>
    </ul>
  </li>
</ul>

The $('#menu a').removeClass('active'); line will remove the active class from all A elements. The next line handles adding the class to the required elements, and there's a fair amount going on.

It starts with the element that was clicked on ($(this)), and adds the class to it. Next it finds the first parent LI (which is the level of the clicked elements), then goes up another LI level (for the parent of the clicked element). It then searches for any immediate children A elements in that element, and adds the class to it. Then it reverts back to the previous found element(s) (the LI) by calling .end(). Then it goes up one more level, again finds immediate children elements, and adds the class to it.

Upvotes: 1

Related Questions