アコーディオンメニューで困っています。
色々と調べているのですが、どうもうまく動きません。
■やりたい事
アコーディオンメニューを使っていますが、同じページからのアンカーリンク、そして別ページからのアンカーリンクで飛んできた際に、隠れているアコーディオンを開いて表示した。
■現状
・アンカーリンク(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ベストアンサー
- 回答日時:
ざっと見ただけですが・・・
> $(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");
1回だけの処理なので、必ずしもToggleの必要はないでしょう。show(又はslideDown)などで良いと思われます。
また、クリック時の処理内容を見てみると、title要素にactiveのクラス設定/削除が行われていますが、最初の時にはこの処理はしなくても良いのでしょうか?
(Toggleで設定されているので、以降のクリック時に期待とは違う結果になる可能性がありそうです)
もし、必要な場合は処理を追加する必要がありますね。
同じことをする別の方法として、『該当するtitle部分をクリックしたことにする』という考え方もありそうです。
$(location.hash).find(".title").click();
のようにしておくことで、実際の処理は設定したイベントハンドラに渡すという仕組みにしておくのが簡単かも知れません。
(イベントの処理内容がいろいろとある場合は、この方が効率的な記述になるでしょう。)
fujillin様
とても丁寧に教えていただきまして、誠に有り難うございます。
早速試してみた所、見事に動きました!!
出来た瞬間に感動してしまいました。
本当にありがとうございます。
教えていただいた通りに、クリック時のイベントハンドラからはずし、
$(location.hash).find(".bbb").show();
に変更した所、出来ました。
本当に感謝いたします!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript 指定したパスが現URLに含まれていたら特定要素を削除するJavascriptのコードを教えてください 2 2023/04/27 17:58
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tryの終了
-
DBのinsert/updateを1ボタンで...
-
ftp 同時複数接続の負荷テスト...
-
SwingUtilities.invokeLater(ne...
-
スレッド1とスレッド2を交互に...
-
WaitForSingleObjectの復帰時間
-
JavaScriptからJAVAクラスを呼...
-
doGetとdoPostの違い
-
[Java] while(true)の意味
-
Tomcat高負荷時の設定について
-
Javaでのデバッグコード削除
-
エクセルVBAで、条件に一致する...
-
「タイプ初期化子が例外をスロ...
-
オブジェクト指向プログラミン...
-
生成したインスタンスを削除す...
-
変数名の付け方
-
servletからjspへオブジェクト...
-
レコード件数の表示
-
複数の変数を宣言する時、同時...
-
private static という変数の修飾
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
tryの終了
-
数値の定数を付ける時
-
Javaでのデバッグコード削除
-
C#で別スレッドの終了を知りたい
-
[Java] while(true)の意味
-
Tomcatのスレッドを破棄する方法
-
Javaプログラムからポップアッ...
-
ラジオボタンの選択判定
-
JavaScriptからJAVAクラスを呼...
-
WPF C#でF10のイベント取得方法...
-
PHPでDB処理中にプログレスバー...
-
素数判定を再帰処理で
-
Javaアプリケーション実行の返...
-
switch文の中に、throws new Ex...
-
doGetとdoPostの違い
-
JDBCでテーブルUPDATE後の再検...
-
Tomcat高負荷時の設定について
-
ラベルの表示までが異常に遅い...
-
ExcelVBA で文字列の特定の文字...
-
SwingUtilities.invokeLater(ne...
おすすめ情報