Открыть submenu по клику

256
25 декабря 2017, 14:41

Есть вот такой пример. Сейчас сабменю открывается по клику на любой li. Нужно чтобы открывало именно то сабменю которое находится непосредственно в этом li.

Код:

$(function() { 
 $('.main li').click(function(){ 
 $('.sub').slideToggle(); 
 }) 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="main"> 
  <li><a href="">1</a></li> 
  <li> 
     <a href="">2</a> 
       <ul class="sub"> 
        <li><a href="">1.1</a></li> 
        <li><a href="">1.2</a></li> 
        <li><a href="">1.3</a></li> 
      </ul> 
   </li> 
   <li><a href="">3</a></li> 
   <li><a href="">4</a></li> 
   <li><a href="">5</a></li> 
</ul>

CodePen

Answer 1

Попробуйте так:

$(function() {
    $('.main li').click(function() {
        $(this).find('.sub').slideToggle();
    })
});
Answer 2

Например:

$('.main li a').click(function(e){   // клик на ссылку 
 e.preventDefault();                // запрещаем переход по ссылке 
 var item = $(this).closest('li');  // ищем li именно этой ссылки 
 var sub = item.find('.sub');       // именно в этом пункте находим подменю 
 sub.slideToggle();                 // развернуть\свернуть подменю 
});
.sub {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="main"> 
  <li><a href="">1</a></li> 
  <li> 
     <a href="">2</a> 
       <ul class="sub"> 
        <li><a href="">1.1</a></li> 
        <li><a href="">1.2</a></li> 
        <li><a href="">1.3</a></li> 
      </ul> 
   </li> 
   <li><a href="">3</a></li> 
   <li><a href="">4</a></li> 
   <li><a href="">5</a></li> 
 </ul>

READ ALSO
Как добавить в свое расширение к браузеру (add-ons) одну &ldquo;фичу&rdquo; показанную на картинке?

Как добавить в свое расширение к браузеру (add-ons) одну “фичу” показанную на картинке?

В AdBlock есть "фича" строка на иконке которая показывает количество заблокированных рекламных блоковЯ не преследую цели просто стянуть из исходника...

223
Autocomplete-paths выдает ошибку

Autocomplete-paths выдает ошибку

Работаю в Атоме, плагин autocomplete-paths выдает ошибку

255
Правильный экспорт из localstorage

Правильный экспорт из localstorage

Есть таблица на странице indexhtml, в каждой строке которой есть checkbox

238
Как подключить все классы, а не перезаписывать главный последним подключённым

Как подключить все классы, а не перезаписывать главный последним подключённым

Есть например главный класс и классы которые его расширяют:

228