Q&A
有難う御座います！
前提・実現したいこと
初心者です。
会社のWEBサイトを作っていて、3階層のアコーディオンメニューで、ボタンをクリックした際に他の階層が閉じる設定にしたいのですが、どのように記述すればよいのかわかりません。
発生している問題・エラーメッセージ
色々なサイト見て、2階層目までは閉じることができたのですが、その記述だと、3階層目を開くことができません。
該当のソースコード
<script> $(function(){ $('.s_07 .ac_one .ac_header').click(function(){ $(this).next('.ac_inner').slideToggle(); $(this).toggleClass("open"); }); }); </script>試したこと
<script> $(function(){ $('.s_07 .ac_one .ac_header').click(function(){ $(this).next().slideToggle(); $('.s_07 .ac_one .ac_header').not($(this)).next().slideUp(); }); }); </script>補足情報（FW/ツールのバージョンなど）
<body> <div class="section s_07"> <div class="ac_one"> <div class="ac_header">1階層目-1 <div class="i_box"> <i class="one_i"></i> </div> </div> <div class="ac_inner"> <div class="ac_one"> <div class="ac_header">2階層目-1 <div class="i_box"><i class="one_i"></i></div> </div> <div class="ac_inner"> <div class="ac_one"> <div class="ac_header">3階層目-1</div> <div class="ac_header">3階層目-2</div> </div> </div> </div> <div class="ac_one"> <div class="ac_header">2階層目-2 <div class="i_box"><i class="one_i"></i></div> </div> <div class="ac_inner"> <div class="ac_one"> <div class="ac_header">3階層目-3</div> <div class="ac_header">3階層目-4</div> </div> </div> </div> </div> </div> <div class="ac_one"> <div class="ac_header">1階層目-2 <div class="i_box"><i class="one_i"></i></div> </div> <div class="ac_inner"> <div class="ac_one"> <div class="ac_header">2階層目-3 <div class="i_box"><i class="one_i"></i></div> </div> <div class="ac_inner"> <div class="ac_one"> <div class="ac_header">3階層目-5</div> <div class="ac_header">3階層目-6</div> </div> </div> </div> <div class="ac_one"> <div class="ac_header">2階層目-4 <div class="i_box"><i class="one_i"></i></div> </div> <div class="ac_inner"> <div class="ac_one"> <div class="ac_header">3階層目-7</div> <div class="ac_header">3階層目-8</div> </div> </div> </div> </div> </div> <div class="ac_one"> <div class="ac_header">1階層目-3 <div class="i_box"><i class="one_i"></i></div> </div> <div class="ac_inner"> <div class="ac_one"> <div class="ac_header">2階層目-5 <div class="i_box"><i class="one_i"></i></div> </div> <div class="ac_inner"> <div class="ac_one"> <div class="ac_header">3階層目-9</div> <div class="ac_header">3階層目-10</div> </div> </div> </div> <div class="ac_one"> <div class="ac_header">2階層目-6 <div class="i_box"><i class="one_i"></i></div> </div> <div class="ac_inner"> <div class="ac_one"> <div class="ac_header">3階層目-11</div> <div class="ac_header">3階層目-12</div> </div> </div> </div> </div> </div> </div> </body>
回答2件
0
下記のようなことでしょうか。
js
1$(function(){ 2 $('.s_07 .ac_one .ac_header').click(function(){ 3 $(this).parent().siblings().find('.ac_inner').slideUp(); 4 $(this).next('.ac_inner').slideToggle(); 5 $(this).toggleClass("open") 6 $(this).parent().siblings().find(".open").removeClass("open"); 7 }); 8});
siblings() で自分以外の兄弟要素を取得できますので、それを利用します。
投稿2021/01/26 06:15
総合スコア34073
0
ベストアンサー
javascript
1$(function(){ 2 $('.ac_inner').hide(); 3 $('.ac_header').on('click',function(){ 4 $(this).next('.ac_inner').slideToggle(); 5 $(this).closest('.ac_one').siblings().not(this).find('.ac_inner').slideUp(); 6 }); 7});
投稿2021/01/26 05:52
総合スコア116694
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/01/26 06:19
2021/01/26 09:42