大切な時間

IT系の話題や、趣味であるロードバイク、カメラ、iPhoneなどの話題を書いてます

*

[jquery] カテゴリリストの「もっと見る」をjQueryで実装する。

      2014/06/25

ショッピングサイトなどでサイドメニューにカテゴリ一覧を載せますが
カテゴリ数が多いと縦長になってしまう。

そこで、一定数以上は非表示にして「もっと見る」を押したら開くメニューを実装してみた。
簡単&よく使うので備忘録として残しておきます。

※追記:jQuery1.9以降ではtoggleイベントが無くなったのでこの方法は使えません。1.8以前で動作します。

プラグインもあるけど、本体のみで実装できます。
まずはHTMLソースから。

次はjQuery部分。

1行目は、li:gt(4) で 「4番目のインデックス以降」と指定してます。

インデックスは0から始まるので、0から数えた4番目=5番目の li が対象になります。
そして .not(“#more”) で、末尾に書いた「もっと見る」の li を対象から外しました。
じゃないともっと見る自体が消えてしまいますw

2行目から実際の開閉処理。 toggle(function,function,function…)
クリックした時の処理を function で複数指定出来ます。
最後のfunctionまで処理をしたら最初に戻ります。

4行目で、最初に非表示にさせた項目を表示させ、
5行目で「もっと見る」のテキストを「閉じる」に変更しました。
これが最初に「もっと見る」をクリックした時の処理。

次にクリックした時の処理が7行目から。
8行目は1行目と同じ処理。5番目以降でなおかつ「もっと見る」以外の li 項目を非表示にし、
「閉じる」に変えたテキストを再度「もっと見る」に変更しました。

以後、クリックする度にこの2つの処理が繰り返されます。
簡単ですね!
なお、 show() と hide() の中身の数字を変更すればスピードが変わります。単位はミリ秒です。

あとはCSSで装飾すればOKです。
処理を軽くするために、何度も出てくる

これを変数にしちゃったほうがいいですね。今回は簡単な処理なので省きましたが。

全くプログラムが出来ない私でもこの程度ならさくさくと書けるようになりました♪ jQuery、めっちゃ便利です。

 - jQuery