Q&A
おっと、失礼、yambejpさんご自身で調整された投稿とconflictしましたね。お捨て置きください。
作ろうとしているもの
Flexコンテナ内にFlexアイテムを3つ均等配置し、
いずれかのFlexアイテムをクリックするとアコーディオンのように
クリックした要素が広がり、残った2つの要素を縮小させるものを作ろうとしています。
jQueryでクリックした要素に.activeを追加、
残りの2つの要素に.noneを追加して実装しようと試みたところ、
初期状態から要素をクリックした場合及び、
アクティブな要素をそのままもう一度クリックした場合には意図通りに動作します。
問題点
しかし、3つの内、いずれかの要素がアクティブな状態のまま、
非アクティブ要素をクリックした場合、.removeClass()が動作しておらず()、
Classに.none/.activeの両方を有する要素が出来てしまいます。
それにより、Flexアイテムの間に不自然な隙間が発生してしまい、
且つ、.none/.activeの両方を有する要素が発生してしまう事により、
以降、if文が正常に動作しなくなってしまう為、レイアウトが崩れたままとなってしまいます。
試した事
最初の段階では、.onイベントを使用せず、.clickイベントをダイレクトで使用していたため、
そちらが原因かと思ったのですが、下記の通り.onイベントを使用したコードに修正しても、
改善されませんでした。
いろんなサイトを参考に、試行錯誤しましたが、
自力での対策案が見いだすことが出来ず、質問させていただきます。
どなたか、対策がわかる方がいましたらご回答いただけますと嬉しいです・・・。
よろしくお願いします。
※下記リンクからCodePenへ飛んでいただけますと、
下記ソースコードの実挙動をすぐに確認できます。
teratail 質問用コード
html
1<!DOCTYPE html> 2<html lang="jp" dir="ltr"> 3 4<head> 5 <meta charset="utf-8"> 6 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 7 <script src="test.js"></script> 8 <link rel="stylesheet" href="test.css"> 9 <title>test</title> 10</head> 11 12<body> 13 14 <main id="main-container"> 15 <div class="top_page page1">PAGE 1</div> 16 <div class="top_page page2">PAGE 2</div> 17 <div class="top_page page3">PAGE 3</div> 18 </main> 19 20</body> 21 22</html>
CSS
1/* flex コンテナ プロパティ*/ 2#main-container { 3 width: 100%; 4 height: 800px; 5 display: flex; 6 flex-wrap: nowrap; 7 justify-content: space-around; 8 position: relative; 9 background: white; 10 z-index: 10; 11} 12 13.top_page { 14 width: 33.333%; 15 cursor: pointer; 16} 17 18.top_page h1 { 19 display: inline-block; 20 font-size: 24px; 21 white-space: nowrap; 22 opacity: 1; 23 24 transition: all ease 0.2s; 25} 26 27/* PAGE 1 プロパティ | flex item */ 28.top_page.page1 { 29 background: black; 30 transition: all ease 0.6s; 31} 32.top_page.page1.active { 33 width: 100%; 34} 35.top_page.page1.none { 36 width: 15%; 37} 38 39/* PAGE 2 プロパティ | flex item */ 40.top_page.page2 { 41 background: grey; 42 transition: all ease 0.6s; 43} 44.top_page.page2.active { 45 width: 100%; 46} 47.top_page.page2.none { 48 width: 15%; 49} 50 51/* PAGE 3 プロパティ | flex item */ 52.top_page.page3 { 53 background: white; 54 color: black; 55 transition: all ease 0.6s; 56} 57.top_page.page3.active { 58 width: 100%; 59} 60.top_page.page3.none { 61 width: 15%; 62}
jQuery
1$(function() { 2 var main = $('#main-container'), 3 page1 = $('.top_page.page1'), 4 page2 = $('.top_page.page2'), 5 page3 = $('.top_page.page3'); 6 7 /* top page CLICK */ 8 main.on('click', '.top_page.page1', function(e) { 9 if (!page1.hasClass('active', 'none')) { 10 //初期状態のときに、PAGE1 をクリックした場合の処理 11 page1.addClass('active'); 12 page2.addClass('none'); 13 page3.addClass('none'); 14 } else if (page1.hasClass('active') && page2.hasClass('none') && page3.hasClass('none')) { 15 //上のif文実行後、もう一度 PAGE3 をクリックした際の処理 16 page1.removeClass('active'); 17 page2.removeClass('none'); 18 page3.removeClass('none'); 19 } else if (page1.hasClass('none') && page2.hasClass('active') && page3.hasClass('none')) { 20 //PAGE2要素 がアクティブな状態のときに PAGE1要素をクリックした場合の処理 21 page1.removeClass('none').addClass('active'); 22 page2.removeClass('active').addClass('none'); 23 } else if (page1.hasClass('none') && page2.hasClass('none') && page3.hasClass('active')) { 24 //PAGE3要素 がアクティブな状態のときに PAGE1要素をクリックした場合の処理 25 page1.removeClass('none').addClass('active'); 26 page3.removeClass('active').addClass('none'); 27 }; 28 }); 29 30 main.on('click', '.top_page.page2', function(e) { 31 if (!page2.hasClass('active', 'none')) { 32 //初期状態のときに、PAGE2 をクリックした場合の処理 33 page1.addClass('none'); 34 page2.addClass('active'); 35 page3.addClass('none'); 36 } else if (page2.hasClass('active') && page1.hasClass('none') && page3.hasClass('none')) { 37 //上のif文実行後、もう一度 PAGE2 をクリックした際の処理 38 page2.removeClass('active'); 39 page1.removeClass('none'); 40 page3.removeClass('none'); 41 } else if (page2.hasClass('none') && page1.hasClass('active') && page3.hasClass('none')) { 42 //PAGE1要素 がアクティブな状態のときに PAGE2要素をクリックした場合の処理 43 page1.removeClass('active').addClass('none'); 44 page2.removeClass('none').addClass('active'); 45 } else if (page2.hasClass('none') && page1.hasClass('none') && page3.hasClass('active')) { 46 //PAGE3要素 がアクティブな状態のときに PAGE2要素をクリックした場合の処理 47 page2.removeClass('none').addClass('active'); 48 page3.removeClass('active').addClass('none'); 49 }; 50 }); 51 52 main.on('click', '.top_page.page3', function(e) { 53 if (!page3.hasClass('active', 'none')) { 54 //初期状態のときに、PAGE3 をクリックした場合の処理 55 page1.addClass('none'); 56 page2.addClass('none'); 57 page3.addClass('active'); 58 } else if (page3.hasClass('active') && page1.hasClass('none') && page2.hasClass('none')) { 59 //上のif文実行後、もう一度 PAGE3 をクリックした際の処理 60 page3.removeClass('active'); 61 page1.removeClass('none'); 62 page2.removeClass('none'); 63 } else if (page3.hasClass('none') && page1.hasClass('active') && page2.hasClass('none')) { 64 //PAGE1要素 がアクティブな状態のときに PAGE3要素をクリックした場合の処理 65 page1.removeClass('active').addClass('none'); 66 page3.removeClass('none').addClass('active'); 67 } else if (page3.hasClass('none') && page1.hasClass('none') && page2.hasClass('active')) { 68 //PAGE2要素 がアクティブな状態のときに PAGE3要素をクリックした場合の処理 69 page2.removeClass('none').addClass('active'); 70 page3.removeClass('active').addClass('none'); 71 }; 72 }); 73 74});
回答2件
0
ベストアンサー
こんな感じでは？
javascript
1<script> 2$(function() { 3 $('.top_page').on('click',function(){ 4 $(this).addClass('active').removeClass('none'); 5 $('.top_page').not(this).removeClass('active').addClass('none'); 6 }).eq(0).trigger('click'); 7}); 8</script> 9<main id="main-container"> 10 <div class="top_page page1">PAGE 1</div> 11 <div class="top_page page2">PAGE 2</div> 12 <div class="top_page page3">PAGE 3</div> 13</main>
調整版
仕様がよくわからないのですが、こういうことですか？
- 初期状態ではどこもactive/noneではない
- クリックするとそこがactiveになって残りはnone
- activeをクリックするとどこもactive/noneではなくなる
javascript
1<script> 2$(function() { 3 $('.top_page').on('click',function(){ 4 if($(this).is('.active')){ 5 $('.top_page').removeClass('active none'); 6 }else{ 7 $(this).addClass('active').removeClass('none'); 8 $('.top_page').not(this).removeClass('active').addClass('none'); 9 } 10 }); 11}); 12</script> 13<main id="main-container"> 14 <div class="top_page page1">PAGE 1</div> 15 <div class="top_page page2">PAGE 2</div> 16 <div class="top_page page3">PAGE 3</div> 17</main>
投稿2019/10/28 00:26
編集2019/10/28 03:19
総合スコア114843
0
//初期状態のときに、PAGE1 をクリックした場合の処理
のようなコメントを、すべて console.log('初期状態のときに、PAGE1 をクリックした場合の処理') に変えてみてください。期待しているif文の中を通っていないことがわかると思います。
jQueryには詳しくないのですが、 if (!page1.hasClass('active', 'none')) { ... } の時点ですでにifの評価結果が期待通りではないと思います。hasClassに複数の引数を渡せるのか？渡せたとしてそれはANDになるのか？というあたりが気になります (前述のとおりjQueryには詳しくないのでご自身でご確認ください)
yambejpさんの回答とそちらへのコメントを拝見しました。ここまでサンプルを出していただいているのであとは質問者さん側で調整すればよいと感じましたが、回答例として調整したコードを載せておきます。
js
1$(function() { 2 $('.top_page').on('click',function(){ 3 // activeな状態でクリックされたら、全要素リセット 4 if($(this).hasClass('active')) { 5 $('.top_page').removeClass('active').removeClass('none'); 6 return; 7 } 8 9 $(this).addClass('active').removeClass('none'); 10 $('.top_page').not(this).removeClass('active').addClass('none'); 11 });
投稿2019/10/28 03:23
総合スコア2982
ご回答いただきありがとうございます！
いただきましたアドバイスをもとに、
console.log()にifの処理内容を書いてデバッガツールでテストしたところ、
おっしゃる通り、2つ目/3つ目のif文が実行されていないようでした。
原因を探したところ、これもご指摘の通り、.hasClassが原因でした。
.hasClass自体に複数セレクタを指定する事は可能です。
しかし、.hasClassで複数のセレクタをした場合は、
セレクタで指定した順番と一致しなければ真偽値「false」が返ってくる仕様でした。
（※完全に勉強不足でした）
まずはじめに、私のソースコードが誤っており、複数の引数を指定しておりました。
ここを修正してみても意図した動作はしません。
私のソースでは、ifの最初の文で.hasClassに対して論理Not演算子をつけて判定をしていたので、
真偽の返り値は「True」になってしまいます。
ゆえに2つ目/3つ目のelse ifが実行されることはなく、
質問時のように不自然な挙動となってしまっていたようです。
今まで完全独学でやっていたため、console.log()をこのように使う事で、
デバッグが容易になるという発想はありませんでした。
今後、何かエラーに行き詰った時の参考とさせていただきます！
本当にありがとうございます！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/28 02:58
2019/10/28 04:40