2015.03.09

メモ:MOREボタンに使えそうな簡単なjQueryコード

posts_photo

APIとかでまとめて読み込んでソース成形したものを、「MORE」や「もっと見る」などのボタンで小出しにしながら表示させるときに使えそうな簡単なコードです。面倒なんでjQuery仕様となっています。
なんていうか、毎回ajaxで通信取得するほどの量もないけど、まとめて表示するには多い…みたいなときに使うかなと思います。

<!--ulが一度に表示させるひとかたまり-->
<ul class="open">
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>
<ul>
    <li>test2</li>
    <li>test2</li>
    <li>test2</li>
</ul>
<ul>
    <li>test3</li>
    <li>test3</li>
    <li>test3</li>
</ul>
<p id="btn">ボタン</p>
/*ulは基本非表示に、.opneがついたものは表示するように*/
ul{
  display:none;
}
ul.open{
  display:block;
}
$('#btn').click(function(){
    $('.open+ul').addClass('open');
});

隣接セレクタって結構便利ですよね。
ちょっと工夫すればアニメーションもつけられるし、結構便利に使えるのではと思います。

改訂版 Webデザイナーのための jQuery入門
改訂版 Webデザイナーのための jQuery入門
-Amazonで見る


記事のタグ一覧:,

スポンサードリンク

関連記事

カテゴリー内のおすすめ記事