无序列表的Jquery扩展插件

我有一张由许多李组成的无序名单。我想在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>

因此，当我单击“更多”时，它应该会显示剩余的列表项

任何建议

谢谢。

试试看

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

})； 并在页面中添加更多内容，如

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

HTML

JS

​

---

您可以尝试代码示例

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

});

});

看

---

​

感谢您的回复，现在我可以拥有..更少以便列表可以再次缩小吗？感谢您的回复，现在我可以拥有..更少以便列表可以再次缩小吗？将其中一个更改为绑定，并将show更改为切换，如下所示：

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

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

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

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

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

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

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

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

});

});

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