前提・実現したいこと
▼こちらのページのアコーディオンの実装中なのですが、、
https://125naroom.com/web/3046
4. アコーディオン、一番目は開けておく(一つ開けると他は閉じる)
.accordion_headerをクリックした際、
.accordion_oneにもopenクラスが付いたり外れたりするようにしたいです。
装飾で+αしたいなというのがあり、jQueryをどう記述し直せば良いかわからず、
どなたかご教示いただきたく
よろしくおねがいします!
該当のソースコード
HTML
1<div class="accordion_one"> 2 <div class="accordion_header stay">アコーディオン、一番目は開けておく 3 <div class="i_box"><i class="one_i"></i></div> 4 </div> 5 <div class="accordion_inner stay"> 6 <div class="box_one"> 7 <p class="txt_a_ac">アコーディオンの中身です。一つ開けると他は閉じます。</p> 8 </div> 9 </div> 10</div>
jQuery
1// .s_04 .accordion_one 2$(function(){ 3 //.accordion_oneの中の.accordion_headerがクリックされたら 4 $('.s_04 .accordion_one .accordion_header').click(function(){ 5 //クリックされた.accordion_oneの中の.accordion_headerに隣接する.accordion_innerが開いたり閉じたりする。 6 $(this).next('.accordion_inner').slideToggle(); 7 $(this).toggleClass("open"); 8 //クリックされた.accordion_oneの中の.accordion_header以外の.accordion_oneの中の.accordion_headerに隣接する.accordion_oneの中の.accordion_innerを閉じる 9 $('.s_04 .accordion_one .accordion_header').not($(this)).next('.accordion_one .accordion_inner').slideUp(); 10 $('.s_04 .accordion_one .accordion_header').not($(this)).removeClass("open"); 11 $('.s_04 .accordion_one .accordion_header.stay').not($(this)).toggleClass("open"); 12 }); 13});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/04 07:00
2020/08/04 13:04