カテゴリのページだけ記事のタイトルが並ぶようにしたい。かつ、タイトルの下にボタンをつけて、ページ遷移なしで本文を出したい！という思いがずっとあって、今回実際にやってみました。
大まかな手順
- category.php にボタンの画像を設置
- category.php の記事の本文を適当なクラスをつけた div で囲む
- header.php で jQuery を読み込ませる
- header.php にボタンをクリックすると記事が出てくるように javascript を書く
書いてみた javascript
カテゴリをクリックしたあとのページで動いてます。
$(document).ready(function(){
$(‘div.hoge).css(‘cursor’,'pointer’);
$(‘div.hoge).click(function() {
$(this).next().slideToggle(‘slow’);
});
});
クリックした要素の次の要素
“クリックした要素の次の要素” の指定のしかたがよくわからず、時間がかかった。
$(this + ‘div.hoge’)
みたいにすると、クリックした要素 (this) の次の div.hoge が指定できると思いきや、すべての div.hoge に効果が発動してしまう。検索すると next() を使うと実現できることが判明。
next([expr])
要素集合の各要素の「次」にあたる兄弟要素を、全て抽出する。
このnext関数はあくまで各要素のすぐ隣の要素のみを抽出し、次以降を選択するのではない。その場合はnextAllを用いること。
引数には条件式を指定し、結果セットから更に絞込みを行うことも可能。
