疑似要素のactiveがうまく動かないです。

疑似要素のactiveがうまく動かないです。
クリックした時には赤色に背景色が変わりますが、
クリックを離してしまうと背景色が変わってしまいます。

クリックししていない時には今の状態の青色で、
そしてクリックしたらアコーディオンメニューが表示されますが、
その間は、赤色にしたいです。

※スマホ表示にして見てください。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <!--Metaタグ-->
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
9    <!--OGP-->
10    <meta property="og:title" content="ページの タイトル" />
11    <meta property="og:description" content="ページのディスクリプション" />
12    <meta property="og:type" content="ページの種類" />
13    <meta property="og:url" content="ページの URL" />
14    <meta property="og:image" content="サムネイル画像の URL" />
15    <meta property="og:site_name" content="サイト名" />
16    <meta property="og:locale" content="ja_JP"  />
17
18    <!--Bootstrap CSS-->
19    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
20    
21    <!--CSS-->
22    <link rel="stylesheet" href="style.css">
23
24    <!--Fontawesome-->
25    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
26
27    <!--Swiper.js-->
28    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
29    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
30
31    <title>Document</title>
32</head>
33<body>
34  
35
36<!--メガドロップダウンメニュースマホ-->
37<div class="accordion d-block d-md-none" id="accordionExample">
38    <div class="row g-0">
39        <div class="col-4">
40            <div class="accordion-item">
41                <h2 class="accordion-header" id="headingOne">
42                  <button class="accordion-button accordion-button1 collapsed detail-title text-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
43                    来院・入院の方
44                  </button>
45                </h2>
46            </div>
47        </div>
48        <div class="col-4">
49            <div class="accordion-item">
50                <h2 class="accordion-header" id="headingTwo">
51                  <button class="accordion-button accordion-button1 collapsed detail-title text-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
52                    慶應義塾大学病院について
53                  </button>
54                </h2>
55            </div>
56        </div>
57        <div class="col-4">
58            <div class="accordion-item">
59                <h2 class="accordion-header" id="headingThree">
60                  <button class="accordion-button accordion-button1 collapsed detail-title text-white" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
61                    医療関係の方
62                  </button>
63                </h2>
64            </div>
65        </div>
66        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
67            <div class="accordion-body">
68                <p class="details"><a href="">初めて受診される方<i class="fas fa-chevron-right"></i></a></p>
69                <p class="details"><a href="">通院中・再来の方<i class="fas fa-chevron-right"></i></a></p>
70                <p class="details"><a href="">入院面会の方<i class="fas fa-chevron-right"></i></a></p>
71                <p class="details"><a href="">人間ドックを受診される方<i class="fas fa-chevron-right"></i></a></p>
72                <p class="details"><a href="">診療科・部門一覧<i class="fas fa-chevron-right"></i></a></p>
73                <p class="details"><a href="">病名・医師名検索<i class="fas fa-chevron-right"></i></a></p>
74                <p class="details"><a href="">役割・機能<i class="fas fa-chevron-right"></i></a></p>
75                <p class="details"><a href="">健康・医療情報（KOMPAS）<i class="fas fa-chevron-right"></i></a></p>
76                <p class="details"><a href="">地図・フロア図<i class="fas fa-chevron-right"></i></a></p>
77                <p class="details"><a href="">院内施設のご案内<i class="fas fa-chevron-right"></i></a></p>
78                <p class="details"><a href="">よくあるお問い合わせ<i class="fas fa-chevron-right"></i></a></p>
79                <p class="details"><a href="">お問い合わせ一覧<i class="fas fa-chevron-right"></i></a></p>
80                <p class="details"><a href="">来院・入院の方トップ<i class="fas fa-chevron-right"></i></a></p>
81            </div>
82        </div>
83        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
84            <div class="accordion-body">
85                <p class="details"><a href="">病院概要<i class="fas fa-chevron-right"></i></a></p>
86                <p class="details"><a href="">診療科・部門一覧<i class="fas fa-chevron-right"></i></a></p>
87                <p class="details"><a href="">統計・実績データ<i class="fas fa-chevron-right"></i></a></p>
88                <p class="details"><a href="">理念・行動指針<i class="fas fa-chevron-right"></i></a></p>
89                <p class="details"><a href="">知ってほしい慶應義塾大学病院<i class="fas fa-chevron-right"></i></a></p>
90                <p class="details"><a href="">病院紹介<i class="fas fa-chevron-right"></i></a></p>
91                <p class="details"><a href="">病院広報誌「すゝめ」<i class="fas fa-chevron-right"></i></a></p>
92                <p class="details"><a href="">ご寄付のお願い<i class="fas fa-chevron-right"></i></a></p>
93                <p class="details"><a href="">公開講座・社会連携講座<i class="fas fa-chevron-right"></i></a></p>
94                <p class="details"><a href="">取材について<i class="fas fa-chevron-right"></i></a></p>
95                <p class="details"><a href="">ボランティア募集<i class="fas fa-chevron-right"></i></a></p>
96                <p class="details"><a href="">お問い合わせ一覧<i class="fas fa-chevron-right"></i></a></p>
97                <p class="details"><a href="">来院・入院の方トップ<i class="fas fa-chevron-right"></i></a></p>
98            </div>
99        </div>
100        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
101            <div class="accordion-body">
102                <p class="details"><a href="">患者さんの紹介について<i class="fas fa-chevron-right"></i></a></p>
103                <p class="details"><a href="">診療科・部門一覧<i class="fas fa-chevron-right"></i></a></p>
104                <p class="details"><a href="">病名・医師名検索<i class="fas fa-chevron-right"></i></a></p>
105                <p class="details"><a href="">医療連携について<i class="fas fa-chevron-right"></i></a></p>
106                <p class="details"><a href="">採用情報<i class="fas fa-chevron-right"></i></a></p>
107                <p class="details"><a href="">研修医・専修医について<i class="fas fa-chevron-right"></i></a></p>
108                <p class="details"><a href="">ボランティア募集<i class="fas fa-chevron-right"></i></a></p>
109                <p class="details"><a href="">医学部・医学研究科<i class="fas fa-chevron-right"></i></a></p>
110                <p class="details"><a href="">治験・臨床試験情報<i class="fas fa-chevron-right"></i></a></p>
111                <p class="details"><a href="">統計・実績データ<i class="fas fa-chevron-right"></i></a></p>
112                <p class="details"><a href="">よくあるお問い合わせ<i class="fas fa-chevron-right"></i></a></p>
113                <p class="details"><a href="">お問い合わせ一覧<i class="fas fa-chevron-right"></i></a></p>
114                <p class="details"><a href="">来院・入院の方トップ<i class="fas fa-chevron-right"></i></a></p>
115            </div>
116        </div>
117    </div>
118  </div>
119<!--メガドロップダウンメニュースマホ-->
120
121
122         <!--Swiper Js-->
123        <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
124        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
125        <script type="text/javascript" src="script.js"></script>
126
127          <!--CDNでjQuery読み込む-->
128          ]<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
129
130
131       <!--Bootstrap Js-->
132       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
133</body>
134</html>

css
1.mega-drop {
2  box-shadow: 0 0 8px gray;
3}
4
5.details {
6  border-bottom: 1px solid #aaa;
7  padding-bottom: 10px;
8}
9
10.detail-title {
11  font-size: 12px;
12  padding: 3px 0px;
13  height: 35px;
14  text-align: center;
15}
16
17.accordion-button1 {
18  background-color: #005;
19}
20
21.accordion-button1:active {
22  background-color: #d7000f;
23}

itagagaki

2021/05/09 04:53

activeはクリックしてから離すまでなので当然の動作ですね。 Bootstrapのcollapseの状態変化に応じてJavaScriptを走らせる例がありましたので紹介しておきます。 How to trigger a JavaScript function after “Bootstrap: collapse plugin” transition is done https://stackoverflow.com/questions/13010315/how-to-trigger-a-javascript-function-after-bootstrap-collapse-plugin-transiti

Larkiwing

2021/05/09 05:11

activeはクリックしてから離すまでなんですね。ということは、ちゃんと機能してますね。 http://www.htmq.com/selector/active.shtmlには :active擬似クラス …… クリック中の要素にスタイルを適用すると書いてあったので、クリックして機能している間中だとおもっていましたが、僕の勘違いでした。資料ありがとうございます。やってみます。

Larkiwing

2021/05/09 07:18

トライしましたが、できません。 $('.accordion-button1').on('click', function(){ $(this).toggleClass('isActive'); }) これだとダメでした。

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

回答2件

ベストアンサー

そしてクリックしたらアコーディオンメニューが表示されますが、
その間は、赤色にしたいです。

「その間」というのが、

(A)アコーディオンが開く(または閉じる)、アニメーションの間
(B)アコーディオンが開いてから、(もう一度クリックして)閉じるまでの間

のどちらなのかハッキリしませんが、たぶん(A)だろうと推測しています。
違ってたら、スルーしてください。

Bootstrap 5.0のドキュメントによれば、アニメーションの開始時と終了時にイベントが発生するようなので、それを利用してCSSクラスを付け外しすれば良いと思います。

css
1.accordion-button1.isActive {
2  background-color: #d7000f;
3}

javascript
1$(function(){
2  $('.accordion-collapse').on('show.bs.collapse shown.bs.collapse hide.bs.collapse hidden.bs.collapse', function(){
3    $('[data-bs-target="#'+$(this).attr('id')+'"]').toggleClass('isActive');
4  });
5});

このイベントは、開閉ボタンではなく、メニューに対して発生する、という点に注意してください。そのため、イベントハンドラの中から対応する開閉ボタンを見つけるために、data-bs-target属性を利用しています。

あと、ここでは、showとshown、およびhideとhiddenは、必ずペアで発生する、と想定してtoggleClass()を使ってますが、何らかの要因でペアにならない可能性も考慮するなら、showとhideではaddClass()し、shownとhiddenではremoveClass()する、という作戦の方が良いかもしれません。

[追記]
(B)がやりたいのであれば、JSは不要だと思います。
メニューの開閉状態は、「ボタンにcollapsedクラスが付いてるかどうか」で判断できるので…。

css
1.accordion-button1:not(.collapsed) {
2  background-color: #d7000f;
3}

※collapsedクラスは、Bootstrapが付け外ししてくれます。

投稿2021/05/10 22:29

編集2021/05/11 23:28

gpsoft

総合スコア1323

Larkiwing

2021/05/11 03:27

回答ありがとうございます。僕の質問が悪かったのですが、実装したいことは "「その間」というのが、"Bです。→アコーディオンが開いてから、(もう一度クリックして)閉じるまでの間です。なので、https://getbootstrap.com/docs/5.0/components/collapse/#eventsをみながら、イベントを変更しようと思ったのですが、「インスタンスメソッドが呼び出されている間」という選択肢がありません。このような場合は、どうしたらいいでしょうか？

gpsoft

2021/05/11 23:29

「インスタンスメソッドが呼び出されている間」の意図がピンとこないのですが、(B)がやりたいなら、JSは不要な気がします。回答欄に追記しました。

Larkiwing

2021/05/12 03:18

JSに何かあると思っていましたが、CSSで充分なんですね。ありがとうございます。(*‘ω‘ *)

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

下記コードを追加で思ったような動きをすると思います。
:activeは使ってないのでcssから削除してOKです。

Javascript
1<script>
2        const accordionBtn = document.getElementsByClassName("accordion-button");
3        for(let i = 0; i < accordionBtn.length; i++) {
4            accordionBtn[i].addEventListener("click", () => {
5                for(let i = 0; i < accordionBtn.length; i++) {
6                    accordionBtn[i].style.backgroundColor = "#005";
7                }
8                accordionBtn[i].style.backgroundColor = "#d7000f";
9            });
10        }
11</script>