实施a“的最佳方式是什么？”；“显示更多”；带jQuery的按钮？

在回显了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>

黑猫
灰猫
红猫
白狗

如果一个“宠物”有一个以上的结果，我只想显示第一个，并有“显示更多”按钮，将显示/切换其余的结果

我认为使用数据属性是分组/隐藏类似结果的最佳方法

我真的被卡住了，请帮帮忙。

诸如此类的事情，尽管您仍然需要自己通过$.ajax实现数据（元素）

HTML

CSS

尽管您仍然需要自己通过$.ajax实现数据（元素）

HTML

CSS

$（'ul>li'）.hide（）；
$（'ul'）.children（）.eq（0.show（）；
$（'ul'）.append（'Show More'）；
$（'.close_button'）。在（'单击'，函数（）上）{
$（'ul>li'）。每个（函数（）{
$（this.slideDown（）；
})
})
$（'ul>li'）.hide（）；
$（'ul'）.children（）.eq（0.show（）；
$（'ul'）.append（'Show More'）；
$（'.close_button'）。在（'单击'，函数（）上）{
$（'ul>li'）。每个（函数（）{
$（this.slideDown（）；
})
})
您可以使用get（）获取li元素的数量，如果li元素超过3个，则可以使用hide（）、fadeIn（）或其他一些jquery技术来显示show more链接。show more可以在一个有id的范围内，这样你就可以隐藏它


if（$（'li'）.get（）=>3）{
$（#showMore）.fadeIn（）
}


黑猫
灰猫
红猫
白狗

显示更多。。。

我来看看我是否能让小提琴工作
您可以使用get（）来获取li元素的数量，如果超过3个，您可以使用hide（）、fadeIn（）或其他一些jquery技术来显示show more链接。show more可以在一个有id的范围内，这样你就可以隐藏它


if（$（'li'）.get（）=>3）{
$（#showMore）.fadeIn（）
}


黑猫
灰猫
红猫
白狗

显示更多。。。

我会看看我是否能得到一把小提琴，编辑：根据您的评论更新代码

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


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


var$ul=$（'ul'）；
var$li_not_first=$（'ul li'）。not（'：first'）。hide（）；
$ul.append（“
显示更多…”；
$（'.shPets'）。单击（函数（）{
如果（$（this）.text（）==“显示更多…”）{
$（this.text（'Hide'）；
$li_不是第一个。toggle（）；
}否则{
$（this.text（'Show More'）；
$li_不是第一个。toggle（）；
}
});
编辑：根据您的评论更新代码

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


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


var$ul=$（'ul'）；
var$li_not_first=$（'ul li'）。not（'：first'）。hide（）；
$ul.append（“
显示更多…”；
$（'.shPets'）。单击（函数（）{
如果（$（this）.text（）==“显示更多…”）{
$（this.text（'Hide'）；
$li_不是第一个。toggle（）；
}否则{
$（this.text（'Show More'）；
$li_不是第一个。toggle（）；
}
});
这很有效。。。不管怎样，我在这里也添加了jquery ready…只需将它添加到页面中，它就可以正常工作了。。。无论如何，我也在这里添加jquery ready…只需将它添加到页面中，它应该可以工作。这就是答案。但不幸的是，它隐藏了一切。例如，我不想隐藏“狗”。“宠物”应该有单独的“显示更多”按钮。@jamjam你能再解释一下吗？就像单击“显示更多”时发生的情况一样。@jamjam mm是否希望基于
数据pet
的特定显示/隐藏选项？是。对于每个有超过1个结果的独特宠物，应该有一个显示更多按钮。切换效果应该不会对其他宠物产生影响。@jamjam Check更新了帖子，我认为这正是你想要的。这是答案。但不幸的是，它隐藏了一切。例如，我不想隐藏“狗”。“宠物”应该有单独的“显示更多”按钮。@jamjam你能再解释一下吗？就像单击“显示更多”时发生的情况一样。@jamjam mm是否希望基于
数据pet
的特定显示/隐藏选项？是。对于每个有超过1个结果的独特宠物，应该有一个显示更多按钮。切换效果应该不会对其他宠物产生影响。@jamjam Check更新了帖子，我想这正是你想要的。
ul > li:not(:first-child) {
    display: none;
}
span {
    background-color: #ffa;
    cursor: pointer;
    margin: 0 .5em;
    padding: 0 .5em;
    color: #aaf;
}​

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

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

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

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

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