Question

回显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，我只想显示第一个结果并显示“显示更多”按钮，以显示/切换其余结果。

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

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

Answer 1

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

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

Answer 3

修改：根据您的评论更新代码，

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

Answer 4

您可以使用get（）来获取li元素的数量，如果大于3，您可以使用hide（），fadeIn（）或其他一些jquery技术来显示您的show more链接。节目更多可能在一个带有id的范围内，所以你可以隐藏它

get() link

if（$（'li'）。get（）=＆gt; 3）{ $（＃相册更多>>暂）.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>

我会看看我是否可以小提琴工作

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

4 个答案: