用 jQuery 实现“显示更多”按钮的最佳方法是什么？答案

【问题标题】：Whats the best way to implement a "Show More" button with jQuery?用 jQuery 实现“显示更多”按钮的最佳方法是什么？
【发布时间】：2012-04-11 14:39:08
【问题描述】：

从 PHP/Mysql 回显结果列表后。

我想以一种易于管理的方式向用户显示结果。

例子：

<ul>
<li data-pet="cat"><a href="/black-cat">Black Cat<a></li>
<li data-pet="cat"><a href="/grey-cat">Grey Cat<a></li>
<li data-pet="cat"><a href="/red-cat">Red Cat<a></li>
<li data-pet="dog"><a href="/dog-cat">White Dog<a></li>
</ul>

如果“宠物”有超过 1 个结果，我希望只显示第一个结果并使用“显示更多”按钮来显示/切换其余结果。

我认为使用 data 属性是分组/隐藏相似结果的最佳方式。

我真的卡住了，请帮忙。

【问题讨论】：

标签： jquery toggle show-hide

【解决方案1】：

编辑：根据您的评论更新代码，

在您的 html 中添加显示更多链接，如下所示，

<ul>
  <li data-pet="cat"><a href="/black-cat">Black Cat<a></li>
  <li data-pet="cat"><a href="/grey-cat">Grey Cat<a></li>
  <li data-pet="cat"><a href="/red-cat">Red Cat<a></li>
  <li class="shPets" data-pet="cat">Show More..</li>
  <li data-pet="dog"><a href="/dog-cat">White Dog<a></li>
  <li data-pet="dog"><a href="/dog-cat">Black Dog<a></li>
  <li data-pet="dog"><a href="/dog-cat">Grey Dog<a></li>  
  <li class="shPets" data-pet="dog">Show More..</li>  
  <li data-pet="fish"><a href="/dog-cat">Grey fish<a></li>
</ul>

上面可以通过脚本来完成，但是如果你把它放在你的 HTML 中会更好，更容易。

DEMO

var $li = $('ul li');
var $shPets = $('.shPets');

$shPets.each (function () {
    var petType = $(this).data('pet');
    $('ul li[data-pet='+petType+']')
        .not('.shPets') //not shPets
        .not(':first')  //everything except first
        .hide();
});

$('.shPets').click (function () {
    var petType = $(this).data('pet');
    if ($(this).text() == 'Show More..') {
        $(this).text('Hide');
        $('ul li[data-pet='+petType+']').show();
    } else {
        $(this).text('Show More..');
        $('ul li[data-pet='+petType+']')
          .not('.shPets') //not shPets
          .not(':first')  //everything except first
          .hide();
    }
});

您可以隐藏除第一个之外的所有内容，然后在单击显示/隐藏文本时切换它们。见下文，

DEMO

var $ul = $('ul');
var $li_not_first = $('ul li').not(':first').hide();

$ul.append('<li class="shPets">Show More..</li>');

$('.shPets').click (function () {
    if ($(this).text() == 'Show More..') {
        $(this).text('Hide');
        $li_not_first.toggle();
    } else {
        $(this).text('Show More');
        $li_not_first.toggle();
    }
});

【讨论】：

这是结束的答案。但不幸的是它隐藏了一切。例如，我不想隐藏“狗”。 “宠物”应该有单独的显示更多按钮。
@jamjam 你能再解释一下吗？就像点击显示更多时会发生什么一样。
@jamjam mm 你想要基于data-pet 的特定显示/隐藏选项吗？
是的。对于每个具有超过 1 个结果的独特宠物，应该有一个显示更多按钮。切换效果应该对其他宠物没有影响。
@jamjam 检查更新的帖子，我认为它完全符合您的要求。

【解决方案2】：

$('ul > li').hide();

$('ul').children().eq(0).show();

$('ul').append('<button class="close_button">Show More</button>');

$('.close_button').on('click', function(){
    $('ul > li').each(function(){ 
        $(this).slideDown();
    })
})

【讨论】：

这行得通...无论如何我也在其中添加准备好的jquery...只需将其添加到它应该可以工作的页面

【解决方案3】：

See a fiddle here 类似的东西，虽然你仍然需要自己实现数据（元素），通过 $.ajax 来实现

HTML

<ul>
    <li data-pet="cat"><a href="javascript:void(0)">Black Cat</a><span>Show More</span></li>
    <li data-pet="cat"><a href="javascript:void(0)">Grey Cat</a></li>
    <li data-pet="cat"><a href="javascript:void(0)">Red Cat</a></li>
    <li data-pet="dog"><a href="javascript:void(0)">White Dog</a></li>
</ul>

jQuery Javascript

$("ul > li:first-child span").on('click', function(e) {
    $(this).parent().nextAll().toggle();
})

CSS

ul > li:not(:first-child) {
    display: none;
}
span {
    background-color: #ffa;
    cursor: pointer;
    margin: 0 .5em;
    padding: 0 .5em;
    color: #aaf;
}

【讨论】：

【解决方案4】：

您可以使用 get() 来获取 li 元素的数量，如果超过 3 个，您可以使用 hide()、fadeIn() 或其他 jquery 技术来显示您的 show more 链接。显示更多可以在带有 id 的跨度中，因此您可以隐藏它

get() link

if ($('li').get() => 3) { $(#showMore).fadeIn() }

<ul>
<li data-pet="cat"><a href="/black-cat">Black Cat<a></li>
<li data-pet="cat"><a href="/grey-cat">Grey Cat<a></li>
<li data-pet="cat"><a href="/red-cat">Red Cat<a></li>
<li data-pet="dog"><a href="/dog-cat">White Dog<a></li>
</ul>
<span id="showMore">Show more... </span>

我看看能不能弄个小提琴

【讨论】：