Question

说我有一个无序列表，如下：

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
</ul>

我如何使用JQuery隐藏最后2个列表项并在那里有一个“显示更多”链接，所以当点击时，最后2个列表项会出现？

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li style="display:none;">Four</li>
   <li style="display:none;">Five</li>
   <li>Show More</li>
</ul>

Answer 1

尝试以下代码示例：

$('ul li:gt(3)').hide();
$('.show_button').click(function() {
    $('ul li:gt(3)').show();
});

Answer 2

为了好玩，这是一个迂回的方式，在一个链中做到这一点：

$('ul')
  .find('li:gt(3)')
  .hide()
  .end()
  .append(
    $('<li>Show More...</li>').click( function(){
      $(this).siblings(':hidden').show().end().remove();
    })
);

Answer 3

我只想显示“显示/隐藏”，如果大于最大值，所以我这样做，跟着肯：

$('ul').each(function(){
  var max = 6
  if ($(this).find("li").length > max) {
    $(this)
      .find('li:gt('+max+')')
      .hide()
      .end()
      .append(
        $('<li>More...</li>').click( function(){
          $(this).siblings(':hidden').show().end().remove();
        })
    );
  }
});

Answer 4

这更像是这样。您必须隐藏大于2的子项，因为Three被索引为2.此外，如果您想将Show More放在LI标记中，则需要在选择器中包含:not(:last-child)。像这样：

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li><a href=# class=show>Show More</a></li>
</ul>
<script>$("li:gt(2):not(:last-child)").hide();
$('.show').click(function(){
$("li:gt(2)").show();
});
</script>

Answer 5

您可以尝试Show First N Items jQuery Plugin。所有你需要写的是：

<ul class="show-first" data-show-first-count="3">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

它会自动转换为：

<ul class="show-first" data-show-first-count="3">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li><a href="#" class="show-first-control">Show More</a></li>
    <li style="display: none;">Four</li>
    <li style="display: none;">Five</li>
</ul>

点击Show More后，它将转换为：

<ul class="show-first" data-show-first-count="3">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li style="display: none;"><a href="#" class="show-first-control">Show More</a></li>
    <li style="display: list-item;">Four</li>
    <li style="display: list-item;">Five</li>
</ul>

Fyi，我为这个插件贡献了代码。

Answer 6

在Ken和Cloud之后，我添加了“更多”按钮的规定，以转到“更少”并切换相关的列表项。

$('.nav_accordian').each(function(){
    var max = 6
    if ($(this).find('li').length > max) {
        $(this).find('li:gt('+max+')').hide().end().append('<li class="sub_accordian"><span class="show_more">(see more)</span></li>');
        $('.sub_accordian').click( function(){
            $(this).siblings(':gt('+max+')').toggle();
            if ( $('.show_more').length ) {
                $(this).html('<span class="show_less">(see less)</span>');
            } else {
                $(this).html('<span class="show_more">(see more)</span>');
            };
        });
    };
});

Answer 7

我假设您根据示例代码开始使用UL。

我会发现UL并隐藏项目大于您最初要显示的最后一项的索引。然后我会添加一个新项目作为显示其余部分的钩子。最后，由于不再需要，我会隐藏节目更多选项。

请参阅以下内容：

$('ul li:gt(3)')
.hide()
.parent()
.append('<li onclick="$(this).parent().find(''li:gt(3)'').show();$(this).hide();">Show more</li>');

Jquery，hide＆amp;在第n项后显示列表项

7 个答案: