Masquer tous les li éléments et de montrer les 2 premières et les basculer par bouton

Supposons que j'ai

<ul>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

Je veux jQuery code pour masquer tous les <li> puis montrer le poing et la seconde
puis append() supplémentaires <li>more</li> qui est utilisé pour basculer l'
caché li.

  • vous m'avez perdu sur "ajouter ... à bascule'
  • veut supplémentaires li contenant le mot more qui est utilisé pour activer / désactiver la visibilité de l'2 cachés éléments de la liste. Au moins, c'est comment je l'ai lu.
  • votre r grande
InformationsquelleAutor Mostafa Elkady | 2011-02-19
  1. 18

    cela devrait le faire ..

    //hide all li and then show the first two
$('ul li').hide().filter(':lt(2)').show(); 

//append a li with text more that on click will show the rest
$('ul').append('<li>more</li>').find('li:last').click(function(){
    $(this).siblings(':gt(1)').toggle();
});

    démo à: http://jsfiddle.net/gaby/tNGxN/2/

    Mise à jour pour ajouter de modification du texte de plus à moins ..

    $('ul li')
    .hide()
    .filter(':lt(2)')
    .show();

$('ul')
    .append('<li><span>more</span><span class="less">less</span></li>')
    .find('li:last')
    .click(function(){
        $(this)
            .siblings(':gt(1)')
            .toggle()
            .end()
            .find('span')
            .toggle();
    });

    besoin d'une règle css de .less{display:none}

    démo: http://jsfiddle.net/gaby/tNGxN/3/

    • Comment est-il cacher lorsque le more lien est cliqué à nouveau?
    • il n'est pas ... interprété la bascule partie de le montrer.. recherche..
    • fixes, mais il commence à devenir un bordel à gérer 🙂
    • 8=========> son ne cache une
    • mis à jour fixe le code de cette question. il cache maintenant à nouveau..
    • comment je peux faire plus d'être moins et ajouter les actifs et les non actifs de la classe
    • ajout de mise à jour.

    InformationsquelleAutor Gabriele Petrioli
  2. 5

    Est-ce quelque chose que vous êtes à la recherche pour?

     $('li').hide()
        .slice(0,1)
        .addClass('fixed')
        .show();
 $('<li class="toggle">more</li>')
        .appendTo('ul')
        .click( function() {
             $('li:not(.toggle,.fixed)').toggle();
         });
    • html merci>>>>>>>>>>
    • J'étais juste à l'aide de votre code html.
    InformationsquelleAutor tvanfosson