Q&A
HTMLも提示してください。
いつもお世話になっております。
jQueryの実装で狙い通りの挙動にならないため
質問させていただきました。
〇実現したいこと
今、4つのパネルがありjQueryのアコーディオンを利用して
一度に1つのアコーディオンだけを表示しようとしています。
初期状態(flgがinitiqlize)では、accordion1を表示、
残りのaccordion2-4は非表示にさせていますが、
こちらの挙動はうまくいっています。
しかしaccordion4を表示、残りのaccordion1,2,3を非表示に
させたとき（flgがdisplay4）ではなぜかクリックイベントが
2回発生してしまいます。
より詳細に述べると$('.accordionTrigger4 > p').click(function () に
ブレークポイントをはりflgをdisplay4とした上でaccordion4をクリックすると
処理が2度通ってしまいます。
（flgがinitializeのときは1度しか通りません）
flgがdisplay4の時でも1度しか処理が通らないようにしたいのですが、
どのように修正をすればよろしいでしょうか？
もしご助言がありましたらよろしくお願い致します。
JavaScript
1function accordion(flg) { 2 3 if (flg == 'initialize') { 4 $('.accordion2').hide(); 5 $('.accordion3').hide(); 6 $('.accordion4').hide(); 7 } else if( flg=='display4') { 8 $('.accordion1').hide(); 9 $('#accordionImg1').attr('src', './img/accordion_down.png') 10 $('.accordion2').hide(); 11 $('.accordion3').hide(); 12 $('.accordion4').slideDown(); 13 $('#accordionImg4').attr('src', './img/accordion_up.png') 14 } 15 16 $('.accordionTrigger1 > p').click(function () { 17 var display1 = $('.accordion1').css('display'); 18 19 //連打対策 20 if ($('.accordion1').not(':animated').length >= 1) { 21 $('.accordion1').slideToggle(700); 22 } 23 if (display1 == 'none') { 24 $('#accordionImg1').attr('src', './img/accordion_up.png'); 25 $('.accordion2').slideUp(700); 26 $('#accordionImg2').attr('src', './img/accordion_down.png'); 27 $('.accordion3').slideUp(700); 28 $('#accordionImg3').attr('src', './img/accordion_down.png'); 29 $('.accordion4').slideUp(700); 30 $('#accordionImg4').attr('src', './img/accordion_down.png'); 31 } else { 32 $('#accordionImg1').attr('src', './img/accordion_down.png'); 33 } 34 }) 35 $('.accordionTrigger2 > p').click(function () { 36 var display2 = $('.accordion2').css('display'); 37 38 //連打対策 39 if ($('.accordion2').not(':animated').length >= 1) { 40 $('.accordion2').slideToggle(700); 41 } 42 if (display2 == 'none') { 43 $('#accordionImg2').attr('src', './img/accordion_up.png'); 44 $('.accordion1').slideUp(700); 45 $('#accordionImg1').attr('src', './img/accordion_down.png'); 46 $('.accordion3').slideUp(700); 47 $('#accordionImg3').attr('src', './img/accordion_down.png'); 48 $('.accordion4').slideUp(700); 49 $('#accordionImg4').attr('src', './img/accordion_down.png'); 50 } else { 51 $('#accordionImg2').attr('src', './img/accordion_down.png'); 52 } 53 }) 54 $('.accordionTrigger3 > p').click(function () { 55 var display3 = $('.accordion3').css('display'); 56 57 //連打対策 58 if ($('.accordion3').not(':animated').length >= 1) { 59 $('.accordion3').slideToggle(700); 60 } 61 if (display3 == 'none') { 62 $('#accordionImg3').attr('src', './img/accordion_up.png'); 63 $('.accordion1').slideUp(700); 64 $('#accordionImg1').attr('src', './img/accordion_down.png'); 65 $('.accordion2').slideUp(700); 66 $('#accordionImg2').attr('src', './img/accordion_down.png'); 67 $('.accordion4').slideUp(700); 68 $('#accordionImg4').attr('src', './img/accordion_down.png'); 69 } else { 70 $('#accordionImg3').attr('src', './img/accordion_down.png'); 71 } 72 }) 73 $('.accordionTrigger4 > p').click(function () { 74 var display4 = $('.accordion4').css('display'); 75 76 //連打対策 77 if ($('.accordion4').not(':animated').length >= 1) { 78 $('.accordion4').slideToggle(700); 79 } 80 if (display4 == 'none') { 81 $('#accordionImg4').attr('src', './img/accordion_up.png'); 82 $('.accordion1').slideUp(700); 83 $('#accordionImg1').attr('src', './img/accordion_down.png'); 84 $('.accordion2').slideUp(700); 85 $('#accordionImg2').attr('src', './img/accordion_down.png'); 86 $('.accordion3').slideUp(700); 87 $('#accordionImg3').attr('src', './img/accordion_down.png'); 88 } else { 89 $('#accordionImg4').attr('src', './img/accordion_down.png'); 90 } 91 }) 92};
回答2件
0
とりあえず全て変えていいなら条件分岐しなくても以下のようにいけます。
サンプル1(引用・参考元)
開いたときの中身が一つの時はサンプル2です。
サンプル2
以下がサンプル1のコードです。
HTML
1<!--サンプル1--> 2<ul class="accordion"> 3 <li> 4 <p>アコーディオン１</p> 5 <ul class="inner"> 6 <li>コンテンツ１</li> 7 <li>コンテンツ２</li> 8 <li>コンテンツ３</li> 9 </ul> 10 </li> 11 <li> 12 <p>アコーディオン2</p> 13 <ul class="inner"> 14 <li>コンテンツ１</li> 15 <li>コンテンツ２</li> 16 <li>コンテンツ３</li> 17 </ul> 18 </li> 19 <li> 20 <p>アコーディオン3</p> 21 <ul class="inner"> 22 <li>コンテンツ１</li> 23 <li>コンテンツ２</li> 24 <li>コンテンツ３</li> 25 </ul> 26 </li> 27 <li> 28 <p>アコーディオン4</p> 29 <ul class="inner"> 30 <li>コンテンツ１</li> 31 <li>コンテンツ２</li> 32 <li>コンテンツ３</li> 33 </ul> 34 </li> 35</ul>
CSS
1body { 2 font-size: 1em; 3} 4ul { 5 list-style: none; 6 padding-left: 0; 7} 8.accordion { 9 text-align: center; 10} 11.accordion .inner { 12 display: none; 13} 14.accordion p{ 15 cursor: pointer; 16 padding: 10px; 17} 18.accordion .inner li{ 19 padding: 10px 0; 20}
Javascript
1$(function(){ 2 3 //.accordion2の中のp要素がクリックされたら 4 $('.accordion p').click(function(){ 5 6 //クリックされた.accordion2の中のp要素に隣接する.accordion2の中の.innerを開いたり閉じたりする。 7 $(this).next('.accordion .inner').slideToggle(); 8 9 //クリックされた.accordion2の中のp要素以外の.accordion2の中のp要素に隣接する.accordion2の中の.innerを閉じる 10 $('.accordion p').not($(this)).next('.accordion .inner').slideUp(); 11 12 }); 13});
以下がサンプル2のコードです。
HTML
1<!--サンプル2--> 2<ul class="accordion"> 3 <li> 4 <p>アコーディオン１</p> 5 <ul class="inner"> 6 <li><img src="https://placehold.jp/500/3d4070/ffffff/5000x1000.png?text=イメージ1" style="width:100%;"></li> 7 </ul> 8 </li> 9 <li> 10 <p>アコーディオン2</p> 11 <ul class="inner"> 12 <li><img src="https://placehold.jp/500/3d4070/ffffff/5000x1000.png?text=イメージ2" style="width:100%;"></li> 13 </ul> 14 </li> 15 <li> 16 <p>アコーディオン3</p> 17 <ul class="inner"> 18 <li><img src="https://placehold.jp/500/3d4070/ffffff/5000x1000.png?text=イメージ3" style="width:100%;"></li> 19 </ul> 20 </li> 21 <li> 22 <p>アコーディオン4</p> 23 <ul class="inner"> 24 <li><img src="https://placehold.jp/500/3d4070/ffffff/5000x1000.png?text=イメージ4" style="width:100%;"></li> 25 </ul> 26 </li> 27</ul>
CSSとJSは共通です。
投稿2018/12/10 14:18
退会済みユーザー
総合スコア0
0
自己解決
本件、自己解決しました。
開発はVB.NETで行っていますが、アコーディオンがうまく機能しなかった理由は
サーバー側の処理にありました。
アコーディオンはwebページの読み込み時にクライアントサイドで実行するようにしています。
（上記ソースのflg=initializeのときです。）
問題は画面遷移する際にflg=display4での処理がうまくできていませんでした。
理由ですが、画面遷移する際遷移先のPage_Load(サーバー)側でCliantScriptにて
動的にaccordion('display4')を実行するようにしていました。
このため、画面表示がされた際に
accordion('initialize')→accordion('display4')
とアコーディオン関数が2度呼ばれてしまい挙動がおかしくなっていました。
上記を解消して動作確認したところ無事狙った動作が確認できました。
コメントをくださったお二方、ありがとうございました。
投稿2018/12/14 09:08
編集2018/12/14 09:11
総合スコア22
あなたの回答
tips
プレビュー
