javascript - 如何显示/显示更多...特殊文本

Question

我有一些简单的文字

<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
    ....

我想让它像（一条两条线）

<li>1</li>
<li>2</li>
more...

当我单击“更多... 谢谢

更新代码：我有来自 json 的数据，但我将其存储到变量中，例如：http: //jsfiddle.net/jWsJP/

Answer 1

为你做了一个快速的小提琴：http: //jsfiddle.net/A4UU5/1/

首先用 css 隐藏你所有的 li display:none;。

---

编辑：在 Bram Vanroy 评论之后，你最好用 JS 隐藏它们：

$('ul').find('li').hide()

---

然后保存一些有用的 var，如果您愿意，可以稍后更改：

var intShow = 2; //Number of elements you show on click
var elLength = $('ul').children().length; //number of li
var current= 1; //start position based on a 0 index

然后创建一个带有 show li 的函数：

function showItems(){
    for(var i=0; i <= current; i++){
        $('ul').find('li').eq(i).show();
    }
}

现在只需添加将增加当前索引的点击绑定：

$('#more').click(function(){
    current += intShow;

    if(current >= elLength){
        current = elLength - 1;
        $(this).remove(); //It remove the button when all li are shown
    }

    showItems();
})

而已！

Answer 2

这是我制作的一个快速小提琴。诸如变量之类的最佳实践不包括在内，因为我现在没有时间，而且我没有看到真正可以方便使用的快速方法。

jQuery

$("li").hide();
$("li:nth-child(1), li:nth-child(2)").show();

$("button").click(function() {
    $("li:visible:last").next().show("fast", function() {
        $(this).next().show(function() {
            if ($(this).is(":last-child")) {
                $("p").text("All items shown");
                $("button").remove();
            }
        });
    });
});

HTML

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

<button>MOAR</button>
<p></p>

Answer 3

这样做...

HTML：

<div class="expandable reduced">   
     <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</div>
<a class="expand">more...</a>

CSS：

.reduced {
    height: 40px;
}

jQuery：

$(".expand").click(function(event){
    $(".expandable").toggleClass("reduced");
    $(this).remove(); // better practice for toggle: change innerHtml to reduce/more
});