作ろうとしているもの

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件

ベストアンサー

こんな感じでは？

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

yambejp

総合スコア116661

HiromuNakajima

2019/10/28 02:58

先日の質問に続いて、ご回答ありがとうございます！ご教示いただいたコードなのですが、ページロード時点で「page1」がアクティブな状態となってしまう事、且つ、いずれかの要素を1度アクティブにしてしまうと、アクティブ要素を再度クリックした際の処理がないために、ページロード以外で要素を初期状態（3つの要素が.none/.active を持たない状態）に戻す事ができません...。可能であれば、アクティブな要素をもう一度クリックした場合は、 3つの要素を初期状態にしたいと考えている為、質問時のようなソースコードとなりました。各.onイベント内の2つ目/3つ目の else if文が正しく実行されれば可能となるかと思うのですが、こちらの.removeClass()が機能しない原因などわかりますでしょうか・・・？厚かましい質問になってしまい大変申し訳御座いませんが、ご返答いただけましたら幸いです。

HiromuNakajima

2019/10/28 04:40

早速のご回答本当にありがとうございます！質問する事に慣れておらず、作りたいものの仕様が不明瞭だった為、お手間をお掛けしました・・・。ご教示いただいたコードを実行させていただきましたところ、私の意図したとおりの挙動をとるようになりました。お力添えいただきましたソースコードをもとに、アクティブ/非アクティブの切り替えなど勉強させていただきます！本当にありがとうございます！

行動規範の内容に同意します

//初期状態のときに、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

thyda.eiqau

総合スコア2982

thyda.eiqau

2019/10/28 03:24

おっと、失礼、yambejpさんご自身で調整された投稿とconflictしましたね。お捨て置きください。

HiromuNakajima

2019/10/28 05:08

ご回答いただきありがとうございます！いただきましたアドバイスをもとに、 console.log()にifの処理内容を書いてデバッガツールでテストしたところ、おっしゃる通り、2つ目/3つ目のif文が実行されていないようでした。原因を探したところ、これもご指摘の通り、.hasClassが原因でした。 .hasClass自体に複数セレクタを指定する事は可能です。しかし、.hasClassで複数のセレクタをした場合は、セレクタで指定した順番と一致しなければ真偽値「false」が返ってくる仕様でした。（※完全に勉強不足でした）まずはじめに、私のソースコードが誤っており、複数の引数を指定しておりました。ここを修正してみても意図した動作はしません。私のソースでは、ifの最初の文で.hasClassに対して論理Not演算子をつけて判定をしていたので、真偽の返り値は「True」になってしまいます。ゆえに2つ目/3つ目のelse ifが実行されることはなく、質問時のように不自然な挙動となってしまっていたようです。今まで完全独学でやっていたため、console.log()をこのように使う事で、デバッグが容易になるという発想はありませんでした。今後、何かエラーに行き詰った時の参考とさせていただきます！本当にありがとうございます！

行動規範の内容に同意します

あなたの回答