複数トリガーで動作するアコーディオンメニュー
お世話になります。
シングルページでページ内リンクでコンテンツ移動するタイプのページ作成を現在やっているのですが、急に標題の内容の要望が急ぎ対応として来まして、困っております。
具体的に言うと、
通常アコーディオンメニューは、
隠してある部分の見出しなんかをトリガーにして、開閉して内容を表示・非表示させると思いますが、今回要望としてあるのは、
グローバルナビもそのトリガーにしたいということです。
グローバルナビをクリックすると、該当箇所に移動しつつ、普段見出しだけで内容が隠してあるものも展開されるということができればと思っております。
参考までにコードを記載しておきます。
js部分
//accordion
$('#sub01 h4').click(function() {
$(this).toggleClass("open").next("div").slideToggle();
}).next().hide();
// drop down
$("#nav li.drop").hover(function() {
$(this).children('ul').show();
}, function() {
$(this).children('ul').hide();
});
});
<div id="nav">
<ul class="clear">
<li><a href="#menu1">メニュー１</a></li>
<li class="drop"><a href="#menu2">メニュー２<span>▼</span></a>
<!-- InstanceBeginEditable name="planList" -->
<ul>
<li><a href="#sub01">サブ1</a></li>
<li><a href="#sub02">サブ2</a></li>
</ul>
<!-- InstanceEndEditable -->
</li>
<li><a href="#menu3">メニュー3</a></li>
<li><a href="#menu4">メニュー4</a></li>
</ul>
</div>
------省略--------------
<div id="sub01" class="subcontent">
<h4><span>項目名</small></span></h4>
<div class="sub01Inner clear">
内容内容内容</div><!-- /planInner -->
</div><!-- /planBox -->
お礼
解決しました！ ありがとうございました！！