Почему не работает конструкция this на JQuery?

248

06 апреля 2018, 18:14

Подскажите, почему не работает такая конструкция на JQuery?

<li class="nav__first-level-wrapper">
  <a href="#" class="nav__first-level">Первый уровень</a>
  <!-- Второй уровень -->
  <ul class="nav__secont-level hide">
    <li> <a href="#">Второй уровень</a> </li>
    <li> <a href="#">Второй уровень</a> </li>
    <li> <a href="#">Второй уровень</a> </li>
  </ul>
</li>
$(".nav__first-level").click(function() {
    $( this ).find(".nav__secont-level").toggleClass("hide");
});

Пытаюсь сделать при клике на первый уровень меню (убирать класс скрывающий блок) показывать второй уровень.
Пробовал сделать через children, тщетно.

$(".nav__first-level").click(function() {
    $( this ).children(".nav__secont-level").toggleClass("hide");
});

Answer 1

Так как элемент .nav__secont-level не является дочерним для $(this), то метод .children() не сможет его найти. Необходимо использовать .next() или .siblings(), которые возвращают следующий и соседние элементы соответственно.

Пример

Answer 2

find(), children()

эти ф-ции ищут дочерние элементы, а вы же хотите скрывать/показывать следующий на том же уровне, а не дочерний

$(".nav__first-level").click(function() { 
    $(this).next().toggleClass("hide"); 
});

.nav__secont-level.hide { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<li class="nav__first-level-wrapper"> 
  <a href="#" class="nav__first-level">Первый уровень</a> 
  <!-- Второй уровень --> 
  <ul class="nav__secont-level hide"> 
    <li> <a href="#">Второй уровень</a> </li> 
    <li> <a href="#">Второй уровень</a> </li> 
    <li> <a href="#">Второй уровень</a> </li> 
  </ul> 
</li>