Question

这是我的代码，用于限制ul中可见列表项的数量：

$wnd.$(el)
    .find('li:gt(9)')
    .hide()
    .end()
    .append(
    $wnd.$('<li>+More</li>').click( function(){
        $wnd.$(this).siblings(':hidden').show().end().remove();
    })
);

点击+More后，它会立即显示所有项目。

代码中应该添加什么内容，例如点击+More时，它不会显示所有内容，只显示接下来的10个项目？然后，当显示所有项目时，应显示+Less选项，以便像之前一样显示前10个项目。

Answer 1

这是一种奇怪的语法，但这样的事情可能

$wnd.$(el)
    .find('li:gt(9)')
    .hide()
    .end()
    .append(
        $wnd.$('<li>+More</li>').click(function () {
            $wnd.$(this).remove().siblings(':hidden').slice(0, 10).show();

            if ($wnd.$(el).find('li:hidden').length === 0) {
                $wnd.$(el).append(
                    $wnd.$('<li>+Less</li>').click(function () {
                        $wnd.$(el).find('li:gt(9)').hide();
                    })
                )
            }
        })
    );

Answer 2

这是一种方式：

    $( 'li:gt(9)' )
        .hide()
        .parent()
        .append( 
            $( '<li>more</li>' ).on( 'click', function() {              
                var el = $( this ).siblings( ':hidden' );

                if ( el.length ) el.slice( 0, 10 ).show();                  
                else $( 'li:gt(9)' ).not( this ).hide();

                $( this ).text( $( this ).siblings( ':hidden' ).length ? 'more' : 'less' );                 
            })
         );

FIDDLE

Answer 3

这个怎么样？ https://jsfiddle.net/0hyL9ngr/

HTML

<ul id='some-list'>
  <li class='list-item'>1</li>
  <li class='list-item'>2</li>
  <li class='list-item'>3</li>
  ...
  <li class='list-item'>39</li>
  <li class='list-item'>40</li>
  <li class='list-item'>41</li>
  <li id='show-more'>More</li>
  <li id='show-first-ten'>Less</li>
</ul>

的JavaScript

$('#show-more').on('click', function () {
  $('.list-item:hidden:lt(10)').show();
  if ($('.list-item:hidden').length == 0) {
    $(this).hide();
    $('#show-first-ten').show();
  }
});

$('#show-first-ten').on('click', function () {
  $('.list-item:gt(9)').hide();
  $(this).hide();
  $('#show-more').show();
});

CSS

#show-more {
  cursor: pointer;
}

#show-first-ten {
  display: none;
  cursor: pointer;
}

.list-item:nth-child(n+11) {
  display: none;
}

限制ul元素中显示的项目

3 个答案: