0

私は多くの李からなる順序付けられていないリストを持っています。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

したがって、さらにクリックすると、残りのリストアイテムが表示されます。

なにか提案を。

ありがとうございました。

4

5 に答える 5

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>

于 2012-09-12T13:07:49.223 に答える
2

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

デモ

于 2012-09-12T12:56:05.197 に答える
1

のようにしてみてください

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

}); 次のようにページに「もっと」を追加します

<a href="">More</a>
$('a').click(function(e){
      e.preventDefault();
      $('li').show()
})
于 2012-09-12T12:51:23.547 に答える
1 
$(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/

于 2012-09-12T12:59:26.697 に答える
1

コードサンプルを試すことができます

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

});

});
于 2012-09-12T13:01:36.533 に答える