Как мне пересечь DOM, чтобы перетащить элемент?

Question

Я пытаюсь, чтобы подменю неупорядоченного списка скользить вниз, когда я выбираю ссылку, но не могу заставить ее работать. Очевидно, мне нужно, чтобы она была нацелена на (это), так как у меня будет много sub ul.

• О
  • Наши услуги
  • Логистика
  
  

$('nav ul li').addClass('show-icon'); 
$('nav > ul li').on('click', function (e) { 
    $(this).toggleClass('open-sub').find('ul > li ul').slideToggle(200); 
}); 

Answer 1

изменить ваш селектор следующим образом:

$('nav ul li').on('click', function(e) { 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    $(this).toggleClass('open-sub').find("> ul").slideToggle(200); 
 
}); //---this should also be changed----^^^^^

ul ul { 
 
    display: none; 
 
} 
 
li a { 
 
    color: blue; 
 
} 
 
.open-sub > a { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a href="" title="">About</a> 
 
     <ul> 
 
     <li><a href="" title="">Our Services</a> 
 
     </li> 
 
     <li><a href="" title="">Logistics</a> 
 
      <ul> 
 
      <li><a href="" title="">Logistics Services1</a> 
 
      </li> 
 
      <li><a href="" title="">Logistics Services2</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

---

Этого селектор $('nav > ul li') просто связать click события для прямого потомка навигационного элемента. Вместо этого вы должны привязать к каждому элементу li.

Если код говорит то этот селектор $('nav > ul li') кричал:

1. Получить каждый нав элементы.
2. Найти элемент ul.
3. Привязать событие на li Элементы из найденного ul.