Jquery，隐藏并显示第n项后的列表项

Say I have an unordered list, like so:

假设我有一个无序列表，比如:

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

How would I, using JQuery, hide the last 2 list items and have a 'show more' link there, so when clicked upon, the last 2 list items would appear?

我如何使用JQuery隐藏最后两个列表项并在其中有一个“show more”链接，当单击时，最后两个列表项将会出现?

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

7 个解决方案

#1

Try the following code example:

尝试以下代码示例:

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

#2

For fun, here's a roundabout way to do it in one chain:

有趣的是，这里有一个迂回的方法，把它放在一个链条上:

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

#3

I only wanted to show the "show/hide" if greater than max, so I did this, following Ken:

我只是想显示“show/hide”如果大于max，所以我做了这个，跟随Ken:

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

#4

It would be more like this. You would have to hide the children greater than 2, because Three is indexed as 2. Also, if you wanted to put the Show More in an LI tag, you would need to include :not(:last-child) in your selector. Like so:

更像这样。必须隐藏大于2的子元素，因为3被索引为2。此外，如果您想将Show更多地放在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>

#5

Following Ken and Cloud, I added provision for the "More" button to turn to "Less" and toggle the relevant list items.

在Ken和Cloud之后，我添加了“More”按钮的准备，以转向“Less”并切换相关列表项。

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

#6

You can try the Show First N Items jQuery Plugin. All you need to write is this:

您可以尝试显示前N个jQuery插件。你所需要写的就是:

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

It will automatically convert to this:

它将自动转换为:

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

And after clicking Show More, it will convert to this:

点击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, I contributed code to this plugin.

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

#7

I'm assuming that you are starting with the UL as per your example code.

我假设您是从UL开始的，根据您的示例代码。

I would find the UL and hide items greater than the index of the last item you'd like to initially display. Then I would add a new item to act as a hook for displaying the rest. Finally, I'd hide the show more option as it was no longer needed.

我将找到UL，并隐藏大于您最初希望显示的最后一个项目的索引的项。然后，我将添加一个新项目，作为显示其余内容的挂钩。最后，我将隐藏show more选项，因为它不再需要。

See the following:

见以下:

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

#1