jQueryアコーディオンメニューddaccordion.js (Accordion Content script)の設置メモ

  • このエントリーをはてなブックマークに追加
  • LINEで送る

ddaccordion.js v1.9現在のお話
Dynamic Drive DHTML Scripts- Accordion Content script (v1.9)

このjs最後にクリックした要素をcookieに保存して
ページ変移後に最後にクリックした要素を開いた状態で移動出来るという便利なオプションがあるんだけど
子を持たない親だけのメニューが混ざっていると、
最後に子メニューを持った親をクリックした場所を記憶してしまい
ページ変移後に変なところが開いてしまう(分かりづらいと思うけど)
みたいな面倒な感じだったので途中経過をメモ。

多分すべての要素が子階層を持っているなら問題は無いのだけれども。

ddaccordion.jsを適用したメニュー

[html classname=”html-sh”]<ul id="dd_nav">
<li><a href="#" class="dd_navheader">親メニュー1</a>
<ul class="dd_child">
<li><a href="#">子メニュー</a></li>
<li><a href="#">子メニュー</a></li>
<li><a href="#">子メニュー</a></li>
</ul>
</li>
<li><a href="#" class="dd_navheader">親メニュー2</a>
<ul class="dd_child">
<li><a href="#">子メニュー</a></li>
<li><a href="#">子メニュー</a></li>
<li><a href="#">子メニュー</a></li>
<li><a href="#">子メニュー</a></li>
<li><a href="#">子メニュー</a></li>
<li><a href="#">子メニュー</a></li>
</ul>
</li>
<li><a href="#">子なしメニュー1</a></li>
<li><a href="#" class="dd_navheader">親メニュー3</a>
<ul class="dd_child">
<li><a href="#">子メニュー</a></li>
<li><a href="#">子メニュー</a></li>
<li><a href="#">子メニュー</a></li>
<li><a href="#">子メニュー</a></li>
<li><a href="#">子メニュー</a></li>
</ul>
</li>
<li><a href="#">子なしメニュー2</a></li>
</ul>[/html]

[css classname=”css-sh”]
/*cssはあまり関係ないけど*/
#dd_box {
width:438px;
padding:20px;
border:1px solid #E9E1CB;
background:#FCFBF8;
color:#fff;
border-radius: 3px;

}

#dd_nav {
font-size:80%;
width:190px;
background:#000;
padding:7px 0;
margin:0 auto;
border-radius : 4px;
-moz-border-radius:3px;
}
#dd_box a {
color:#fff;
text-decoration:none;
display:block;
padding:0 10px;
background:none;
border:none;
}
/* 親 */
#dd_box li a {
height:30px;
line-height:30px;
background:#000;
}
#dd_box li a:hover, #dd_box .chked { background:#1A4395; }
/* 子 */
#dd_box li li a {
height:20px;
line-height:20px;
padding-left:2em;
background:#252525;
}
#dd_box li li a:hover { background:#173267; }
#dd_box li { border-top:1px solid #555; }
#dd_box li,#dd_box li li,
#dd_box ul ul{
list-style:none;
padding:0;
margin:0;
}[/css]

子メニュー無しのページにはclassかidを付けて、それが無ければすべてを閉じるようにした

例えば子メニューが無いページに.dd_childを付けておく
onloadで.dd_childががあるか無いか調べて、みつかったらアコーディオンを閉じる
[js classname=”js-sh”]window.onload=function(){
var keywords="dd_child";
var elems = document.getElementsByTagName("*");

for(var i=0;i<elems.length;i++){
// alert(elems[i].className);
if(elems[i].className==keywords){
ddaccordion.collapseall(‘dd_navheader’);
}
}
}[/js]

とりあえずポスト

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す


You can add images to your comment by clicking here.