アコーディオンメニューをアンカーリンクで開く

質問

アコーディオンメニューで困っています。
色々と調べているのですが、どうもうまく動きません。

■やりたい事
アコーディオンメニューを使っていますが、同じページからのアンカーリンク、そして別ページからのアンカーリンクで飛んできた際に、隠れているアコーディオンを開いて表示した。

■現状

・アンカーリンク(A.html)--------------------
<a href="B.html#アンカー名">リンク</a>

・アコーディオン設置先(B.html)------------------
<div class="aaa" id="アンカー名">
<p class="title">
アコーディオンタイトル
</p>
<p class="bbb">
アコーディオンの内容表示
</p>
</div>

・js---------------------------------------

$(document).ready(function(){
$(".bbb").hide();
$(".title").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
$(location.hash).next(".bbb").slideToggle("slow");
});
});

現状はこのような状態なのですが、アンカーでの動作をしてくれません。

分かる方いらっしゃいましたら、是非教えてください

回答No.1

fujillin · ベストアンサー

ざっと見ただけですが・・・

＞　$(location.hash).next(".bbb").slideToggle("slow");
が、クリックイベントの処理定義の中に書かれていますが、これだとクリックする度にこの処理が走ります。また、クリックしないとこの処理は実行されません。（初期設定として実行されない）
ご質問の内容からすれば、この処理は読込後1度だけ初期設定として実行されれば良いはずですので、クリック時のイベントハンドラからは外す必要があります。

次に、
＞　$(location.hash).next(".bbb")
ですが、location.hashはidに相当する文字列になると想像しますが、対象としたいクラスbbbの要素はこの兄弟要素ではなく子要素になっているのではないでしょうか？
それなので、nextではなくfindなどを用いて取得する必要があるでしょう。
　$(child, parent)～～
の書式で取得しても同様の結果が得られると思います。

以上を修正したとして、
＞　$(location.hash).next(".bbb").slideToggle("slow");
１回だけの処理なので、必ずしもToggleの必要はないでしょう。show（又はslideDown）などで良いと思われます。
また、クリック時の処理内容を見てみると、title要素にactiveのクラス設定/削除が行われていますが、最初の時にはこの処理はしなくても良いのでしょうか？
（Toggleで設定されているので、以降のクリック時に期待とは違う結果になる可能性がありそうです）

もし、必要な場合は処理を追加する必要がありますね。
同じことをする別の方法として、『該当するtitle部分をクリックしたことにする』という考え方もありそうです。
　$(location.hash).find(".title").click();
のようにしておくことで、実際の処理は設定したイベントハンドラに渡すという仕組みにしておくのが簡単かも知れません。
（イベントの処理内容がいろいろとある場合は、この方が効率的な記述になるでしょう。）

お礼

fujillin様

とても丁寧に教えていただきまして、誠に有り難うございます。
早速試してみた所、見事に動きました！！
出来た瞬間に感動してしまいました。

本当にありがとうございます。

教えていただいた通りに、クリック時のイベントハンドラからはずし、

$(location.hash).find(".bbb").show();

に変更した所、出来ました。

本当に感謝いたします！！