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

Question

我有由许多 li 组成的无序列表。我想将 li 计数停止在 5 并显示更多链接，这将扩大剩余的 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();
        }
    });
});

---

演示

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/

​</p>

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

});

});