このブログは階層構造をもつカテゴリのみをナビゲーションにしています。しかしカテゴリは増えるばかりで逆にわかりにくくなってきました。そこで、親カテゴリを残して、子カテゴリを開閉式のアコーディオンにしてみました。

目標とした動作

・子カテゴリ (孫カテゴリ以下を含) を非表示に
・親カテゴリのリンクを無効化→子カテゴリの開閉に使う

$(document).ready(function(){
	$('li.widget_categories>ul>li>ul').css('display','none');
	$('li.widget_categories>ul>li>a').click(function(e){e.preventDefault()}).attr('href','#');
	$('li.widget_categories>ul>li>a').click(function() {
		$(this).next().slideToggle('slow');
	});
});

問題は、子カテゴリのページに移動したときにそのカテゴリが展開されたままだとよいのですが。ページ遷移を超えるので、セッションとかクッキーとか使えばできるのでしょうが、めんどいのでとりあえず開閉のみ。

カテゴリのページだけ記事のタイトルが並ぶようにしたい。かつ、タイトルの下にボタンをつけて、ページ遷移なしで本文を出したい！という思いがずっとあって、今回実際にやってみました。

大まかな手順

• 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を用いること。
引数には条件式を指定し、結果セットから更に絞込みを行うことも可能。

http://semooh.jp/jquery/api/traversing/next/[expr]/