複数トリガーで動作するアコーディオンメニュー

お世話になります。

シングルページでページ内リンクでコンテンツ移動するタイプのページ作成を現在やっているのですが、急に標題の内容の要望が急ぎ対応として来まして、困っております。
具体的に言うと、

通常アコーディオンメニューは、
隠してある部分の見出しなんかをトリガーにして、開閉して内容を表示・非表示させると思いますが、今回要望としてあるのは、
グローバルナビもそのトリガーにしたいということです。

グローバルナビをクリックすると、該当箇所に移動しつつ、普段見出しだけで内容が隠してあるものも展開されるということができればと思っております。


参考までにコードを記載しておきます。

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 -->

No.2 回答者： DoubtOwl 回答日時： 2014/10/30 12:55

添付画像とHTMLが全然違うのでどうしたいのかよくわかりませんがサンプルとしてどうぞ

JavaScript

$("#move").click(function(){
$('html, body').animate({scrollTop:$("a[href = '#menu2']").offset().top}, 300);
if($("a[href = '#menu2']").parent().children('ul').css("display") == "none")
{
$("a[href = '#menu2']").parent().children('ul').show();
}
});

$('#sub01 h4').click(function() {
$(this).toggleClass("open").next("div").slideToggle();
});

$("#nav * li.drop").click(function() {
if($(this).children('ul').css("display") == "none"){
$(this).children('ul').show();
}else{
$(this).children('ul').hide();
}
});


html


<input type="button" id="move" style="margin-bottom:1000px">

<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>項目名</span></h4>
<div style="">
内容内容内容</div><!-- /planInner -->
</div><!-- /planBox -->

No.1 回答者： DoubtOwl 回答日時： 2014/10/30 10:39

・グローバルメニューをクリックすると該当箇所に移動する処理

・見出しをクリックした時の開閉処理

が既にあるのならば

・グローバルメニューをクリックすると該当箇所に移動する処理
に見出しをクリックする処理を呼ぶだけで良いと思いますよ。
既に開いているかチェックして開いていた時は移動だけするようにしたほうが良いですね。

この回答へのお礼

ありがとうございます。

理論的な部分はなんとなく分かりました。探す際のヒントにはなりそうな気がします。

具体的な方法は調べてみるのですが、何ぶん僕がjsが苦手なのと、時間がない中で無茶ぶりされていてパニックになっていまして、ヒントだけでも教えていただければ助かります。

お礼日時：2014/10/30 11:13