Question

我有无序列表，其中包含很多li。我想在5点停止li计数并显示更多链接，这将扩展剩余的li。

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

这个输出必须像

1
2
3
4
5
..more

所以当我点击更多时，它应该显示剩余的列表项。

任何建议。

谢谢。

Answer 1

<强> HTML

<ul id="datalist">
    <li>dataset1</li>
    <li>dataset2</li>
    <li>dataset3</li>
    <li>dataset4</li>
    <li>dataset5</li>
    <li>dataset6</li>
    <li>dataset7</li>
    <li>dataset8</li>
    <li>dataset9</li>
    <li>dataset10</li>
<ul>

<强> CSS

ul li:nth-child(n+6) {
    display:none;
}

ul li {
    border: 1px solid #aaa;   
}

span {
    cursor: pointer;
    color: #f00;                
}

<强> JS

$(function() {
    $('#datalist').append('<span>readmore</span>');
    $('span').click(function() {
        $('#datalist li:hidden').slice(0, 5).show();
        if ($('#datalist li').length == $('#datalist li:visible').length) {
            $('span ').hide();
        }
    });
});

DEMO

Answer 2

if ($('ul li').length > 5 ) {
    $('ul')
    .after('<a class="more">..more</a>')       
    .find('li:gt(4)').hide();    
}

$('.more').click(function() {
    $(this)
        .hide()
        .prev()
        .find('li:hidden')
        .show();
});

请参阅http://jsfiddle.net/FPtfg/

Answer 3

尝试

$("li").each(function(){
    if($(this).text()>5)
        $(this).hide();

}）; 并在页面中添加“更多”，如

<a href="">More</a>
$('a').click(function(e){
      e.preventDefault();
      $('li').show()
})

Answer 4

$(document).ready(function() {
  if ($('li').length>5){
    $('li:gt(4)').hide();

    $('#showMore').show().one('click',function(){
        $(this).hide();
        $('li:gt(4)').show();
    });
  }
});

http://jsfiddle.net/EWSJq/

Answer 5

您可以尝试代码示例

<ul id="all-container">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>    
</ul>
<a href="#" id="btn-show-more">show more</a>

<ul id="more-items-container" style="display:none">   
<li class="more-item">6</li>
<li class="more-item">7</li>
</ul>



<script type="text/javascript">

$(document).ready(function(){

$('#btn-show-more').click(function(){

var moreItems=$('#more-items-container .more-item');
$('#all-container').append(moreItems).slideDown();

});

});

用于无序列表的Jquery扩展器插件

5 个答案:

DEMO