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

目標とした動作

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

$(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');
});
});

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

※追記、デザインを変えてからこの機能は付けていません。また、子カテゴリ（孫カテゴリ以下を含む）を非表示にするのをJavascriptで行っていますが、Jacascriptが実行される前までは表示されていて、実行されたタイミングで非表示になるので、cssで最初から非表示にしていたほうが良い気がします。

ただし、SEOの視点から見ると、display: none の指定はスパム判定の一因になる可能性もあるのでむずかしいところです。サイドバーのリンク集を displya: none にしたところで、いきなりスパム判定になるということもないでしょうけど。

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

大まかな手順

• 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]/