忍者ブログ
01 May

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

13 April

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