Afficher/masquer les <li> par jQuery

J'ai le code html comme

<ul>
<li class="dropdown">text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li class="dropdown">text</li>
<li>text</li>
<li>text</li>
<li class="dropdown">text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

CSS:

li {display:none;}
li.dropdown {display:block;}

Lorsque l'on clique sur li.dropdown, tous les <li> sans classes, dans le courant de la prochaine li.dropdown, doit devenir visible. Et en face de l'action quand on clique de nouveau - masquer <li> sans classe dropdown.

Comment puis-je faire cela?

OriginalL'auteur James | 2011-05-15

  1. 7

    La bonne façon de le faire est avec des sous-menus, donc:

    <ul>
    <li class="dropdown">text
        <ul>
            <li>text</li>
            <li>text</li>
            <li>text</li>
            <li>text</li>
        </ul>
    </li>
    etc...
</ul>

    Vous pouvez ensuite faire 

    $('li.dropdown').click(function() {
    $(this).find('ul').slideToggle('slow');
});

    Sinon, vous devrez utiliser nextUntil:

    $('li.dropdown').click(function() {
    $(this).nextUntil('li.dropdown').slideToggle('slow');
});

    Cela aura l'inconvénient de masquer chaque imbriqué li éléments individuellement, plutôt que comme un bloc. Faire le premier si vous le pouvez.

    Je ne peux pas modifier la structure du document html.
    Puis la deuxième réponse lonesomeday fourni est celui de droite
    Vous pouvez toujours modifier la structure HTML avec jQuery (si vous en avez vraiment besoin de montrer/cacher comme un bloc). Sinon, nextUntil devrait fonctionner correctement.

    OriginalL'auteur lonesomeday

  2. 2

    Je vous conseille d'utiliser une liste imbriquée structure lik ceci:

    <ul>
<li class="dropdown">text
    <ul>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
    </ul>
</li>
<li class="dropdown">text
    <ul>
        <li>text</li>
        <li>text</li>
    </ul>
</li>
</ul>

    Créer un CSS comme ceci:

    li.dropdown ul {
    display : none;
}

    Et ensuite seulement afficher/masquer la imbriqués les listes non ordonnées:

    $('li.dropdown').click(function() {
    $(this).children('ul').toggle();
});

    OriginalL'auteur Daff

  3. 1

    Si vous avez l'élément de $déroulant variable, alors vous pouvez utiliser ceci:

    $dropdown.next( "li:not(.dropdown)" ).hide();

    Qui permet de masquer tous les pas .des listes déroulantes;

    Pour ce faire jusqu'à la prochaine .liste déroulante, vous devrez utiliser:

    $dropdown.next("li").each(...);

    OriginalL'auteur c-smile

  4. 1
    $("li.dropdown").click(function() {
    $(this).nextUntil(".dropdown").toggle();
});

    Violon

    OriginalL'auteur Anthony Accioly