Jquery 隐藏所有li元素并显示前2个元素，然后按按钮切换它们

假设我有

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

二,
三,
四,
五,

我希望jQuery代码隐藏所有

，然后显示第一个和第二个 然后

append（）

一个用于切换

---

隐藏的李。

这是你要找的东西吗

 $('li').hide()
        .slice(0,1)
        .addClass('fixed')
        .show();
 $('<li class="toggle">more</li>')
        .appendTo('ul')
        .click( function() {
             $('li:not(.toggle,.fixed)').toggle();
         });

$（'li'）.hide（）
.切片（0,1）
.addClass（'fixed'）
.show（）；
$（“
更多信息”
.appendTo（'ul'）
。单击（函数（）{
$（'li:not（.toggle.fixed））.toggle（）；
});

这应该可以做到

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

//隐藏所有li，然后显示前两个li
$（'ul li'）.hide（）.filter（':lt（2）'）.show（）；
//附加一个li，其中包含更多文本，单击后将显示其余文本
$（'ul'）。追加（'li>more'）。查找（'li:last'）。单击（函数（）{
$（this）.sides（':gt（1）'）.toggle（）；
});

演示在：

---

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

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

$（“ul li”）
.hide（）
.过滤器（'：lt（2）'
.show（）；
$（'ul'）
.append（“
moreless
”）
.find（'li:last'）
。单击（函数（）{
$（本）
.兄弟姐妹（':gt（1）'）
.toggle（）
(完)
.find（'span'））
.toggle（）；
});

需要

.less{display:none}

---

演示：

您在“附加”中失去了我。。。要切换“@xtofl”-需要一个额外的

li

，其中包含用于切换2个隐藏列表元素可见性的单词

more

。至少，我是这样读的。@tvanfosson你的r great当再次单击

more

链接时，它会隐藏它们吗？@tvanfosson，它不会。。。将切换部分解释为仅显示。。查看它..@tvanfosson，已修复，但它开始变得一团糟，无法维护：）8==============>它不隐藏，我如何可以使更多变少，并添加活动和非活动class@moustafa-我只是在用你的html。