0

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

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

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

我真的卡住了，请帮助。

4

4 回答 4

1

在这里看到类似的东西，虽然你仍然需要自己实现数据（元素），通过 $.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;
}​
于 2012-04-11T14:42:49.903 回答
1 
$('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();
    })
})
于 2012-04-11T14:45:34.887 回答
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 中有它会更好也更容易。

演示

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();
    }
});
于 2012-04-11T14:55:57.410 回答
0

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

获取链接

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>

我会看看我能不能让小提琴工作

于 2012-04-11T14:54:23.973 回答