- 締切済み
Jqueryでのアコーディオン について
Jqueryでのアコーディオンのリンク について教えていただければ幸いです。 下記のアコーディオンを メニュー1をクリックするとリンク先に飛び さらに、アコーディオンが開くようにしたくて下記のアコーディオンを 作りましたが、 そのように、機能しませんでした。 全ての<a> タグにリンクを設定してみました。 ですが、 「サブメニュー」のリンクは機能するのですが 「メニュー1」等のリンクは機能しませんでした。 具体的には、リンク先に飛ばないまま、 アコーデイォンが開いてしまいます。 どうすれば、サンプル.html (dtタグ部分)をクリックするとリンク先に飛び さらに、アコーディオンが開くようになるのでしょうか? もし、ご存じの方がいましたら力を貸していただければ幸いです。 よろしくお願いします。 $(function() { $('#accordion dd').hide(); $('#accordion dt a').click(function(){ $('#accordion dd').slideUp(); $(this).parent().next().slideDown(); return false; }); }); <dl id="accordion"> <dt><a href="サンプル.html">メニュー1</a></dt> <dd> <a href="#">サブメニュー1-1.html</a> <a href="#">サブメニュー1-2.html</a> </dd> <dt><<a href="サンプル.html"></dt> <dd> <a href="#">サブメニュー2-1.html</a> <a href="#">サブメニュー2-2.html</a> </dd> <dt><<a href="サンプル.html"></dt> <dd> <a href="#">サブメニュー3-1.html</a> <a href="#">サブメニュー3-2.html</a> </dd> </dl>
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- ONEONE
- ベストアンサー率48% (279/575)
最初に回答したとおり、ページ遷移するので、遷移先に同じアコーディオンメニューがあった際は、(なんらかの形で保持しないと)開閉状態がリセットされます。 まずですね、アコーディオンとリンクが同じボタンで併用されるのはちょっとおかしい気がします。 アコーディオンの開閉ボタンなら開閉ボタンとして、リンクならばリンクとして機能を分けるべきです。 また、アコーディオンの開閉をどうすべきか、という細かい動きはどうなりますか? 例えばメニューがABCあって、ページ遷移してもそれぞれのメニューの開閉状態を保っていたい、とか、ページAのときはメニューAのみを開いておきたい、とか。 閉じる時はどういう動きをするのか、とか。 ページの初期状態が該当のメニューが開いた状態で他は閉じた状態にしたいのならば、各ページのURLの違いをswitch文なりif文なりで分ければよいです。 もし併用したいのなら、アコーディオンが開ききったら遷移するという制御も可能です。
- ONEONE
- ベストアンサー率48% (279/575)
return falseを取ればいいと思うんだけど、同じ画面内だと遷移しちゃうよのでアコーディオンにする意味がないです。 それともインナーフレームを使うんでしょうか?
お礼
お礼をするのが遅くなり申し訳ありません。 参考になる回答をしてくださったこと感謝しています。
補足
返事遅くなり申し訳ありません。 回答ありがとうございます。 状況としてはドリームウェバーのテンプレート機能を使用した サイドバーにこの機能を搭載しようとしています。 提案されたように、return falseを取ってみました。 結果下記の様になりました。 リンク先に移動するが アコーディオンが開かない 再度クリックしても同様。 下記の改善策を考えてみましたがどうでしょうか? if文を使用して、もし リンク先のURLに飛んでいたら アコーディオンが機能する。 そうでないなら、リンク先に飛ぶとかと できるのでしょうか? もし、よろしければお知恵を貸していただければ幸いです。
お礼
前回に引き続き為になる回答をしていただきありがとうございます。jqueriy初心者のため、不安の中、回答者様の回答が凄く心強いです。
補足
<dl id="accordion"> <dt><a href="サンプル.html">メニュー1</a></dt> <dd> <a href="#">サブメニュー1-1.html>サブメニュー1-1</a> <a href="#">サブメニュー1-2.html>サブメニュー1-2</a> </dd> <dt><<a href="サンプル.html2">メニュー2</dt> <dd> <a href="#">サブメニュー2-1.html>サブメニュー2-1</a> <a href="#">サブメニュー2-2.html>サブメニュー2-2</a> </dd> <dt><<a href="サンプル.html3">メニュー3</dt> <dd> <a href="#">サブメニュー3-1.html</a> <a href="#">サブメニュー3-2.html</a> </dd> </dl> ONEONE様、回答ありがとうございます。 ご指摘のありました 細かい動きを上記のアコーディオンを例にとり説明させていただきます。 メニュー1をクリックする「サンプル.html」のページに飛ぶ リンク先の「サンプル.html」の下位に属している「サブメニュー1」「サブメニュー2」のみが プルダウンで表示され、これは、開いたままで閉じる必要はありません。 図で表すと↓のような感じです。 メニュー1 サブメニュー1-1 サブメニュー1-2 メニュー2 メニュー3 「サブメニュー1」をクリックすると「サブメニュー1-1.html」のページに飛び ここでも先ほどの状態(上記の図の状態)が維持される感じです。 そして、メニュー2をクリックするとリンク先「サンプル.html2」に飛び下記の状態になる。こんな機能を付けたいと望んでいます。 こういう機能が出来るなら特にアコーディオンである必要はありません。 力を貸していただければ幸いです。 よろしくお願いします。 メニュー1 メニュー2 サブメニュー2-1 サブメニュー2-2 メニュー3