jQueryによるアコーディオンメニューの作成【任意のひとつを開いた状態からスタートしたい】
jQueryを用いたアコーディオンメニューを作るにあたり、
任意の一つを最初から開いた状態でスタートさせるには、どのようにコーディングをすればよろしいでしょうか。
以下のようなコーディングを用いています。
【html】
<div id="side">
<div id="recent-posts-3" class="widget widget_recent_entries">
<div class="side_d">
<div class="side_box">
<h3>2017年度</h3>
<ul>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
<li>メニュー</li>
</ul>
</div>
</div>
</div>
<div id="category-4" class="widget widget_category">
<div class="side_d">
<div class="side_box">
<h3>カテゴリー</h3>
<ul>
<li>カテゴリー1</li>
<li>カテゴリー2</li>
<li>カテゴリー3</li>
<li>カテゴリー4</li>
</ul>
</div>
</div>
</div>
<div id="meta-2" class="widget widget_meta">
<div class="side_d">
<div class="side_box">
<h3>メタ情報</h3>
<ul>
<li>ログイン</li>
<li>RSS</li>
<li>WordPress.org</li>
<li>--------</li>
</ul>
</div>
</div>
</div>
</div>
【css】
#side {
width:100%;
padding:5px 5px 5px 10px ;
margin:0px 0 0 0;
background-color:#F0F0F0;
}
#side .widget div .side_box{
margin:5px 0 5px 0;
}
#side .widget div .side_box h3{
width:99%;
margin:1px 1px 0px 1px;
padding:10px 0 10px 20px;
line-height:25px;
color:#FFFFFF;
font-size:16px;
background-color:#888888;
box-sizing: border-box;
}
#side .widget div .side_box h3.wp-accordion{
background-color:#999;
}
/* arrow */
#side .widget div .side_box h3.arrow{
background-color:#BBBBBB;
cursor:pointer;
}
#side .widget div .side_box h3.opend{
cursor:default;
}
/* active */
#side .widget div .side_box h3.active {
background-color:#FF8856;
color:#fff;
}
/* hovered */
#side .widget div .side_box h3.hovered {
background-color:#DAA520;
}
#side .widget div .side_box ul {
display:block;
list-style:none;
width:auto;
height:100%;
margin:0 10px 0 1.8px;
padding:0 0px 0 10px;
background-color:#FFFFFF;
}
#side .widget div .side_box ul li{
list-style:none;
width:96%;
height:16px;
margin-left:5px;
padding:10px 0 10px 35px;
border-bottom:1px #EEEEEE solid;
line-height:16px;
font-size:15px;
color:#555555;
position:relative;
}
#side .widget div .side_box ul li:before{
counter-increment: list;
content: "";
display: block;
position: absolute;
left: 2px;
height: 15px;
width: 15px;
border-radius: 50%;
background: #F6A38B;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#side .widget div .side_box ul li:after{
content: "";
display: block;
position: absolute;
left: 8px;
height: 0;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 5px solid #fff;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#side .widget div .side_box ul li a {
text-decoration:none;
color:#666;
}
【jQuery】
(function($){
$(function(){
//速度
var slide_speed=400;
var keep_openItem;
//MENUブロック指定クラス名付加
var accord=$('#recent-posts-3,#category-4,#meta-2').find('h3').addClass("wp-accordion");
var accord_itme=$('.wp-accordion');
accord_itme.css({'cursor':'pointer'});
accord_itme.next().hide();
//click-action
$('.wp-accordion').click(function(){
//hit判定クラス
$(this).toggleClass("active");
var slideItem=$(this).next();
//hit分岐処理
if ($(this).hasClass('active')){
//開いていればさきに閉じる
if(keep_openItem) {
keep_openItem.slideUp(slide_speed,function(){
//activeクラス切り替
keep_openItem.prev().removeClass("active");
});
}
//開く
slideItem.slideToggle(slide_speed,function(){
//openItem保存
keep_openItem=slideItem;
});
}
if (!$(this).hasClass('active')){
//閉じる
slideItem.slideToggle(slide_speed);
//openItemクリア
keep_openItem=null;
}
});
});
})(jQuery)