- ベストアンサー
Jqueryアコーディオンについて
- Jqueryを使って２段のアコーディオンメニューを実装しているのですが、１つのアコーディオンを押すと他のアコーディオンが閉まる様設定したいです。
- 現在の記述では２段目のアコーディオンを押すと１段目も閉じてしまい、結果的に２段目も見えなくなってしまう状況です。
- ２段目だけを機能させることは可能でしょうか？
- kyamang
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 ご質問文では、どのようなマークアップか不明でしたので、原理のみの説明のつもりで仮のマークアップにしてありますし、 ＞単純化したもので原理のみの、ごく簡単な一例を。 ＞（実際にはリンク要素を設けたりするでしょうから、もう少し複雑になるかと。） とお断りしてあるはずです。 ご提示のマークアップの場合、まず最初にHTMLの文法違反になっていますので、そこを直すことから始めることが必要でしょう。 文法チェックをするには、以下のようなサイトを利用なさるのも一法かと思います。 http://validator.w3.org/#validate_by_input http://www.htmllint.net/html-lint/htmllint.html （必ずしも完璧を目指す必要はないかも知れませんが、重要度の高いエラーは無くすべきです。）
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
回答がないみたいなので… この手のものはネットで解説しているサイトやライブラリもたくさんあると思いますので、まずは検索してみてください。 とりあえず、ご質問の内容を実現するためのヒントを。 ご質問文からはclass="accordion"をそれぞれの項目に設定しているような印象を受けますが、全体の構造さえ明確にしておけばそれぞれにclassを割り振る必要はなさそうに思います。 また、 ＞$('.accordion').next().slideUp(); ＞$(this).next().slideToggle(); って、$('.accordion').clickのイベント処理なので、同じ要素を開閉していることになりませんか？ 実際のにどのようなマークアップを想定しているのかが不明ですが、多段ということなので、それぞれの段がグループ化されていると仮定して、 『クリックされた項目と同じ段の他の項目を閉じ、自分自身はトグルにする』 （その他の要素は変化させない） ということで最低限の実現にはなるかと思います。 （次に開いた時に、その子孫が前のままとか、全て閉じた状態にするとかいろいろあるとは思いますが…） 単純化したもので原理のみの、ごく簡単な一例を。 （実際にはリンク要素を設けたりするでしょうから、もう少し複雑になるかと。） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- ul.accordion li { cursor : pointer; } //--> </style> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript"> <!-- $(function(){ $("ul.accordion ul").hide(); // 初期設定（全部閉じる） $("ul.accordion li").click(function(e){ if(e.target != this) return; $(this).children("ul").slideToggle(); $(this).siblings().children("ul").slideUp(); }); }); //--> </script> </head> <body> <ul class="accordion"> <li>navi1 <ul> <li>navi1_sub1 <ul> <li>navi1_sub1_sub1 <ul> <li>navi1_sub1_sub1_sub1 <ul> <li>navi1_sub1_sub1_sub1_sub1 <ul> <li>navi1_sub1_sub1_sub1_sub1_sub1</li> <li>navi1_sub1_sub1_sub1_sub1_sub2</li> <li>navi1_sub1_sub1_sub1_sub1_sub3</li> </ul> </li> <li>navi1_sub1_sub1_sub1_sub2</li> <li>navi1_sub1_sub1_sub1_sub3</li> </ul> </li> <li>navi1_sub1_sub1_sub2</li> <li>navi1_sub1_sub1_sub3</li> </ul> </li> <li>navi1_sub1_sub2</li> <li>navi1_sub1_sub2</li> </ul> </li> <li>navi1_sub2 <ul> <li>navi1_sub2_sub1</li> <li>navi1_sub2_sub2</li> <li>navi1_sub2_sub2</li> </ul> </li> </ul> </li> <li>navi2 <ul> <li>navi2_sub1 <ul> <li>navi2_sub1_sub1</li> <li>navi2_sub1_sub2</li> <li>navi2_sub1_sub2</li> </ul> </li> <li>navi2_sub2 <ul> <li>navi2_sub2_sub1</li> <li>navi2_sub2_sub2</li> <li>navi2_sub2_sub2</li> </ul> </li> <li>navi2_sub3</li> </ul> </li> <li>navi3 <ul> <li>navi3_sub1</li> <li>navi3_sub2</li> <li>navi3_sub3</li> </ul> </li> </ul> </body> </html>
お礼
ありがとうございます!! 自分の調べ方が悪いのか、このような子タグのみの開閉の情報が出てこず、困っておりました!! 詳しくは理解しておりませんが、やりたい事が出来ました！本当にありがとうございました！ ただ、一つ問題がありまして、fujillinさんにお答え頂いたものを参考にしていたのですが、 メニューに画像を使うと画像上でクリックしても反応せず,画像の余白部分をクリックしないとアコーディオンが反応しない、という状況に陥っております。 実際には下記の様になっております。 ------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- ul.accordion li { cursor : pointer; } //--> </style> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript"> <!-- $(function(){ $("ul.accordion ul").hide(); // 初期設定（全部閉じる） $("ul.accordion li").click(function(e){ if(e.target != this) return; $(this).children("ul").slideToggle(); $(this).siblings().children("ul").slideUp(); }); }); //--> </script> </head> <ul class="accordion"> <li><img src=".jpg"> <ul> <li><img src=".jpg"> <ul class="floatleft"> <a href=""><li>a-1</li></a> <a href=""><li>a-2</li></a> <a href=""><li>a-3</li></a> </ul> </li> <li><img src=".jpg"> <ul class="floatleft"> <a href=""><li>b-1</li></a> </ul> </li> <li><img src=".jpg"> <ul class="floatleft"> <a href=""><li>c-1</li></a> <a href=""><li>c-2</li></a> </ul> </li> </ul> </li> </ul> </body> ------------------------------------------ 実際にこのように記述しているのですが、画像の少し右当たりをクリックしないとアコーディオンが機能しないという様になっております。 こちらは何が原因なのでしょうか??具体的なCSSなども記載した方がよろしいでしょうか?? もしお分かりになる方がいらっしゃいましたらお答え頂ければ幸いです。 よろしくお願い致します!!
お礼
ありがとうございます!! 質問の仕方にも問題があったかとは思いますが御丁寧にお答え頂き、 大変助かりました! まだ実践はしておりませんが、なんとかやっていきます。 ご回答ありがとうございました。 今後もよろしくお願いします!