Toggle Liste mit Sub-Klasse

Question

Toggle funktioniert nicht mit Sub-Klasse (.open), es funktioniert mit Haupt-Tag (li).

$('.open').click(function() { 
    $(this).next('ul').toggle(); 
}); 

Irgendwas fehlt mir?

jsfiddle

Answer 1

Updated fiddle

Die Methode jQuery next() die unmittelbar folgende Geschwister bekommen.

Problem: Sie .open Element hat keine ul Geschwister.

vorgeschlagene Lösung: Gehen Sie auf die Eltern bis li dann die .next() verwenden, die die ul Geschwister wie Ziel wird:

$(this).parent().next('ul').toggle(); 
//Or 
$(this).parents('li').next('ul').toggle(); 

Hoffnung, das hilft.

$('.open').click(function() { 
 
    $(this).parent().next('ul').toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 11111111 <i class="open">open</i></li> 
 
    <ul> 
 
    <li> 1.1 </li> 
 
    <li> 1.2 </li> 
 
    </ul> 
 
    <li> 22222222222 <i class="open">open</i></li> 
 
    <ul> 
 
    <li> 2.1 </li> 
 
    <li> 2.2 </li> 
 
    </ul> 
 
</ul>

Answer 2

Verwenden .closest() für die neareast am nächsten Element li .next() für ausgewählte sofort ul-Element in der

dom bekommen

$('.open').click(function() { 
    $(this).closest('li').next('ul').toggle(); 
}); 

Fiddle

Answer 3

Holen Sie sich das Mutter li Element für die .open und dann t Das nächste Element ist li.

$('.open').click(function() { 
    $(this).parent('li').next('ul').toggle(); 
}); 

Answer 4

Wenn Sie $(this).next('ul').toggle(); legte es zielt auf die nächste ul innerhalb des <li> wo das .open Objekt befindet, aber es gibt keine <ul> dort.

Dafür sollten Sie target das übergeordnete <li> und dann das Ziel <ul>, die darauf folgt.

$('.open').click(function() { 
    $(this).parent().next('ul').toggle(); 
}); 

:

etwas wie folgt Der Code sollte sein