Блог

Главная - Вопросы по программированию - jQuery: вложенная функция «data-target»

jQuery: вложенная функция «data-target»

#javascript #jquery

#javascript #jquery

Вопрос:

Это мой код:

 $("ul li").click(function() {
  var target = $($(this).data("target"));
  $(".hidden").not(target).removeClass("show");
  target.toggleClass("show");
}) 
 * {
  cursor: defau<
}

li {
  cursor: pointer;
}

.hidden {
  display: none;
}

.show {
  display: block;
} 
 <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>

В целом, это выглядит так, как должно выглядеть. Но: если вы нажмете «Связать два», а затем «Связать два один» или «Связать два два», первая навигация все равно должна быть видна. Содержимое для «Link Two One» или «Link Two Two» должно быть добавлено под этим. Если вы нажмете затем «Link One» или «Link Three», содержимое для «Link Two One» и «Link Two Two» должно быть свернуто (а навигация «два», конечно, снова скрыта).

Как это возможно сделать? Я был бы очень благодарен за помощь! 🙂

Ответ №1:

Одним из вариантов было бы использовать .not(this.closest('ul')) , чтобы избежать свертывания ul s, которые являются родителями элемента, на который нажат элемент:

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

li {
  cursor: pointer;
}

.hidden {
  display: none;
}

.show {
  display: block;
} 
 <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>