Question

我有一些简单的文字

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

我想让它像（2行一样）

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

当我点击更多... 2行显示时，此工作重复，直到所有数据显示我怎么能这样做，任何想法？感谢

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

Answer 1

这是我制作的快速fiddle。不包括变量等最佳实践，因为我现在没有时间，而且我没有看到他们真正方便的快速方法。

的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 2

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

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

编辑：在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 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
});

如何显示/显示更多...特殊文字

3 个答案: