welcart サイドバーウィジェットのカテゴリー一覧をアコーディオンパネルにする
<script>
jQuery(function(){
//sideberカテゴリの折り畳み
jQuery(".ucart_widget_body .children").hide();
jQuery(".ucart_widget_body li").hover(function() {
jQuery(this).children('ul:not(:animated)').slideDown(400);
}, function() {
jQuery(this).children('ul:not(:animated)').hide(400);
});
});
</script>
参考
http://hi-rom.com/blog/archives/1721
参考URLは親→子までだが、私のは親→子→孫まであるので、
変に考えてしまって余計なセレクタをいれてしまった。
入れ子関係がどんだけあろうが、変えるのは<ul>のclass名のみでよい。
カテゴリー別なので、.click だとカテ別ページにとんでしまう。
そのため .hover で対処する。WordPressにはこちらのほうがよさそうだ。
数値で開閉速度が決められる。
追記2014/04/14
カーソルが外れ .hide すると、自分の行きたい場所にすんなりいけずにイライラすることがある。
階層が多くなればなるほどそのような事態になるため、開いたら開きっぱなしのほうがよいと思い、
}, function() {
jQuery(this).children('ul:not(:animated)').hide(400);
を削除することにした。
クリックで開閉のアコーディオンパネルができないと、色々な弊害がでてやりにくいね。
参考URLには書いてなかったこと。
試してみるとわかるが、slideDownとhideが繰り返されてしまう。
この「アニメーションが止まらない」を解決するために :not(:animated) をいれる
（jQueryデザイン入門 p129）
$(function(){
//カテゴリの折り畳み
$(".tree-menu .children").hide(); // .childrenというclassの子カテゴリーを隠す状態にする）
$(".tree-menu li").hover(function() { // <li>要素にマウスカーソルを乗せたとき
$(this).children('ul').slideDown(200); // ulの.childrenがスライドダウンする
}, function() {
$(this).children('ul').hide(200); // マウス外したら隠れる
});
});
約束事
WordPress内のphpに記述するときは $ → jQuery に変える
<head>内や<body>すぐ下にいれると読み込みが遅くなるので、</body>の直前に書く。
つまりfooter.php
PR
