隐藏所有li元素并显示前2个元素，然后通过按钮切换它们 [英] Hide all li elements and show the first 2 and toggle them by button

问题描述

假设我有

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

我希望jQuery代码隐藏所有<li>，然后显示拳头和第二个拳头 然后append()另一个<li>more</li>用于切换 隐藏的李.

I want jQuery code to hide all <li> then show the fist and the second one then append() an additional <li>more</li> that is used to toggle the hidden li.

推荐答案

这应该做到..

// 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();
});

演示: http://jsfiddle.net/gaby/tNGxN /2/

更新以将更改的文本从更多添加到更少..

Update to add changing text from more to less ..

$('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();
    });

需要.less{display:none}

演示: http://jsfiddle.net/gaby/tNGxN/3/

这篇关于隐藏所有li元素并显示前2个元素，然后通过按钮切换它们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！