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>

「ペット」に複数の結果がある場合、最初の結果のみを表示し、残りの結果を表示/切り替える「さらに表示」ボタンを使用したいと思います。

同様の結果をグループ化/非表示にするには、データ属性を使用するのが最善の方法だと思います。

私は本当に立ち往生しています、助けてください。

4

4 に答える 4

1

編集:コメントに基づいてコードを更新し、

以下のように、html に [show more] リンクを追加します。

<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 に答える
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

$.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 に答える
0

get() を使用して li 要素の数を取得できます。3 つを超える場合は、hide()、fadeIn()、またはその他の jquery 手法の選択を使用して、show more リンクを表示できます。show more は ID を持つスパンにある可能性があるため、非表示にすることができます

get() リンク

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 に答える