JQuery - как slideToogle уль список/li

Question

Got этот код:

<ul>something 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</ul> 

То, что я хочу добиться, когда я нажимаю на текстовый элемент UL (что-то) вся UL является тумблер. Когда я нажимаю на элемент LI - только этот конкретный элемент LI переключается. Я думаю, мне нужно изменить мой код:

<ul class="whole">something 
    <li> 
    <ul>one 
     <li class="li one">one</li> 
    </ul> 
    <ul>two 
     <li class="li two">two</li> 
    </ul> 
    <ul>three 
     <li class="li three">three</li> 
    </ul> 
    </li> 
</ul> 

Так что я могу чокнуться на что-то (текст) для переключения LI (один, два, три). Но как согласовать переключение всего UL на клик с переключением LI?

JQuery код до сих пор:

$(".whole").click(function() 
    { 
     $(".li").slideToggle(); 
    }); 

Что следует остальная часть кода JQ выглядит?

Answer 1

это будет работать на вас. При нажатии на "something" он скроет целую ул. В противном случае скрывается только конкретная ли.

$("#toggleul,.whole").click(function() 
 
      { 
 
       $("ul").slideToggle(); 
 
      }); 
 
      $('li').click(function(e){ 
 
      $(this).slideToggle(); 
 
       
 
      e.stopPropagation(); 
 
      }) 
 
      $('#toggleli').click(function(){ 
 
       $('li').show(); 
 
       })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <ul class="whole">something 
 
      <li> 
 
      one 
 
      </li> 
 
      <li> 
 
     two 
 
      </li> 
 
      <li> 
 
     three 
 
      </li> 
 
      <li> 
 
     four 
 
      </li> 
 
      </ul> 
 
    <div id="toggleul">toggle ul</div> 
 
    <div id="toggleli">show toggled li</div>

Answer 2

Вы хотите настроить таргетинг на неупорядоченный список и скрыть его сначала с помощью CSS, используйте другой элемент, чтобы вызвать его как ссылку навигации:

$(".toggle-ul").click(function() { 
 
    $(".whole").slideToggle(); 
 
}); 
 
$(".whole .toggle-sub-ul").click(function() { 
 
    $(this).parent().find('ul').slideToggle(); 
 
});

.whole { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="toggle-ul">Click me</div> 
 
<ul class="whole"> 
 
    <li> 
 
    <div class="toggle-sub-ul">Click me</div> 
 
    <ul> 
 
     <li class="li one">one</li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <div class="toggle-sub-ul">Click me</div> 
 
    <ul> 
 
     <li class="li two">two</li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <div class="toggle-sub-ul">Click me</div> 
 
    <ul> 
 
     <li class="li three">three</li> 
 
    </ul> 
 
    </li> 
 
</ul>

EDIT:

Вам нужно добавить дополнительные элементы внутри подгрупп, чтобы вызвать эти переключатели. код обновлен

Answer 3

Вы правы div внутри списка - это ошибка при проверке (Can I use div as a direct child of UL? + Is this HTML structure valid? UL > DIV > { LI, LI } , DIV > { LI, LI } , DIV > { LI, LI }), поэтому просто добавьте класс в элемент UL.

$(".toggle-ul").click(function() { 
 
    $(".whole").slideToggle(); 
 
}); 
 
$(".whole .toggle-sub-ul").click(function() { 
 
    $(this).parent().find('li').slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="toggle-ul">Click me</div> 
 
<ul class="whole"> 
 
    <li> 
 
    <ul class="toggle-sub-ul">Click me 
 
     <li class="li one">one</li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <ul class="toggle-sub-ul">Click me 
 
     <li class="li two">two</li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <ul class="toggle-sub-ul">Click me 
 
     <li class="li three">three</li> 
 
    </ul> 
 
    </li> 
 
</ul>

это должно работать именно так, как вы хотите. BTW Я изменяю код @Sergio Alen здесь, рядом с этим div, это совершенно верно и кредиты должны идти к нему.