jQuery - wie man slideToogle ul/li Liste

Question

diesen Code Got:

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

Was ich will, ist zu erreichen, wenn ich auf UL Textelement klicken (etwas) ganze UL ist Knebel. Wenn ich auf ein LI-Element klicke, wird nur dieses bestimmte LI-Element umgeschaltet. Ich denke, ich brauche meinen Code zu ändern:

<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> 

So kann ich auf etwas (Text) klirre die LI (eins, zwei, drei) zu wechseln. Aber wie kann man den gesamten UL beim Anklicken mit dem Umschalten von LI in Einklang bringen?

jQuery-Code so weit:

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

Was soll der Rest des jQ Code aussieht?

Answer 1

dies wird für Sie funktionieren. Wenn auf "something" geklickt wird es ganze ul verstecken. sonst ist nur bestimmte li ausgeblendet.

$("#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

Sie wollen die gesamte ungeordnete Liste zielen und verstecken es zunächst mit CSS, verwenden Sie ein anderes Element wie ein Navigationslink zu triggern:

$(".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:

Sie müssen zusätzliche Elemente in Ihren Untergruppen hinzufügen, um diese Umschaltvorgänge auszulösen. Code aktualisiert

Answer 3

Sie haben Recht div innerhalb der Liste ist ein Fehler bei der Validierung (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 }), so können Sie einfach eine Klasse UL-Element hinzufügen.

$(".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>

dies sollte genau arbeiten, wie Sie wollen. BTW Ich modifiziere @ Sergio Alen Code hier, neben diesem div, es ist absolut gültig und Credits sollten zu ihm gehen.