jQuery: Issue with nested toggle function

user_12501851 0
Viewed 46

This is my code:

$("ul li").click(function() {
  var target = $($(this).data("target"));
  $(".hidden").not(target).not(this.closest('ul')).removeClass("show");
  target.toggleClass("show");
  $(this).siblings().not(this).removeClass('active');
  $(this).toggleClass("active");
})
* {
  cursor: default;
}

li {
  cursor: pointer;
}

.hidden {
  display: none;
}

.show {
  display: block;
}

li:hover,
.active {
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
  <li data-target=".one">Link One</li>
  <li data-target=".two">Link Two</li>
  <li data-target=".three">Link Three</li>
</ul>

<div class="hidden one">
  Lorem Ipsum One
</div>

<ul class="hidden two">
  <li data-target=".two_one">Link Two One</li>
  <li data-target=".two_two">Link Two Two</li>
</ul>

<div class="hidden two_one">
  Lorem Ipsum Two One
</div>

<div class="hidden two_two">
  Lorem Ipsum Two Two
</div>

<div class="hidden three">
  Lorem Ipsum One
</div>

Basically, everything works fine. But: If you click Link Two, then Link Two One, then Link One, then Link Two, theeeen Link Two One is still active.

How is it possible to fix that?

Would be very thankful for help! <3

jquery javascript
2 Answers

try:

$("ul li").click(function() {
  var target = $($(this).data("target"));
  $(".hidden").not(target).not(this.closest('ul')).removeClass("show");
  target.toggleClass("show");
  $(this).siblings().removeClass('active');
  $(this).addClass("active");
})
user_124859620

maybe this will help you

$("ul li").click(function() {
  var $this = $(this);
  var target = $($this.data("target"));
  $(".hidden").not(target).not(this.closest('ul')).removeClass("show");
  
  $this.siblings().each((i, elm) => {
    var trg = $($(elm).data("target"));
    trg.find("li").removeClass("active");
  });

  $this.each((i, elm) => {
    var trg = $($(elm).data("target"));
    trg.find("li").removeClass("active");
  });
  
  target.toggleClass("show");

  $this.siblings().not(this).removeClass('active');
  $this.toggleClass("active");
})
user_38088260
Related