【WP】jQueryの“slideToggle”でサイドバーのメニューをアコーディオンに。

slidetoggle

slideToggleとは?

指定した要素を、スライドさせながら
表示、非表示を繰り返す。

.slideTogge([duration],[complete])

duration:表示、非表示に掛ける時間。slow(600ms),normal(400ms),fast(200ms)、またはミリ秒を数値で設定可能。
complete:アニメーション完了時に呼び出す関数を指定可能。

slideToggleデモ

メニューをクリックすると動作します。

  • メニュー1
  • メニュー2
  • メニュー3
  • メニュー4

デモのソース

<script>
$(function(){
$(".menu").on("click", function() {
$("#demoST li").next().slideToggle();
});
});
</script>
<ul id="demoST">
<li class="menu">メニュータイトル</li>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul><!-- /demoST -->
<style type="text/css">
<!--
.demoST { list-style:none;}	 	 
.menu {	 	
padding:5px 10px;	 	 
width:300px;	 	 
background:#6AACB8;	 	 
}
.demoST li {
display:none;	 	 
padding:5px 10px;	 	 
width:300px;	 	 
background:#E5E4C7;	 	 
}
-->
</style>

CSSでは、メニューの項目を非表示にする
jQueryで、“.menu”をクリックしたら、“#demoST li”を、
slideTogglesする。

つまり、表示・非表示を繰り返す。

このとき、“.next()”で、“li.menu”自体は、
非表示の対象外になるようにしている。

これを、Sidebarに対して設定するだけでOK!

右サイドバーの「最近の投稿」にも設定してます。
※この投稿でのみ動作します。

テーマによってはサイドバーのhtmlの修正が必要

どんな場合にhtmlの修正が必要になるか?

たとえば、

<h4>メニュータイトル</h4>
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>

これが、一つであれば設定可能ですが、
複数になると、id、classでの指定が出来ないため、

例えば、いずれかのh4を押すと、全てのliが
表示・非表示を繰り返すことになる。

sildebarはどのように修正するか?

funciton.phpにサイドバーの記述が設定されてます。

register_sidebars(1,
array(
'name' => 'サイドバーウイジェット',
'id' => 'sidebar-1',
'description' => 'サイドバーのウィジットエリアです。',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title'  => '<h4 class="widgettitle">',
'after_title'   => '</h4>',
));

上記の6,7行目の様に、<div>などにidを指定することで、
任意の要素の指定が可能になる。

子テーマの場合は…

phpでは、関数の呼び出しは重複できない為、
それに、対処する必要あり。

今回とは少し別のテーマになる為、
参考となるブログのURLを掲載しておく

【Stinger5カスタマイズ】functions.phpのカスタマイズを子テーマ側で実施する方法 | ブログのちから

コメントを残す

メールアドレスが公開されることはありません。