0

Есть вот такой пример. Сейчас сабменю открывается по клику на любой 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

2 ответа 2

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>

2
  • Не знаю, почему отмечен был мой ответ, ведь ваш ответ был более полным.,.
    – selya
    24 дек 2017 в 13:07
  • @selya, это право автора, значит Ваш ему показался более приемлемым)
    – SVE
    24 дек 2017 в 13:20
1

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.