限制ul元素中显示的项目

Limit the items shown in a ul element

本文关键字：项目 显示 ul 元素 限制      更新时间：2023-09-26

以下是我的代码，用于限制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个项目，就像以前一样。

这是一个奇怪的语法，但像这样的东西可能是

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

这是一种方法：

    $( '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

这个怎么样？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;
}
相关文章：