jQueryで指定したis-activeが動かない

前提・実現したいこと

アコーディオンメニューで
「READ MORE ↓」と表示している箇所をクリックすると、「CLOSE ↑」と表示されるようにしたいです。

発生している問題

下記のコードだと、READ MOREはCLOSEに切り替わるのですが、↓はそのまま下を向いています。
自分では間違いに気づけず、どこかおかしな点はありますでしょうか。

該当のソースコード

js
1var $accBtn = $('.readmore-btn'),
2$accContents = $('.content');
3
4$accContents.hide(); //contentsを全て隠す
5$accBtn.each(function() {
6  var flag = "close"; //flagを初期値を設定
7  $(this).click(function(e) {
8    e.preventDefault(); //aタグのリンク無効化
9    $(this).toggleClass('is-active').next().slideToggle(); //すぐ次の要素をスライド
10
11    if(flag == "close"){ //もしflagがcloseだったら
12      $(this).text("CLOSE");
13      flag = "open"; //flagをopenにする
14    }
15    else{ //もしflagがopenだったら
16      $(this).text("READ MORE");
17      flag = "close"; //flagをcloseにする
18    }
19
20  });
21});

css
1    .wrapper {
2        display: block;
3        a {
4            display: flex;
5            &::after {
6                content: "";
7                background: url(../img/arrow.png);
8                background-size: contain;
9            }
10            &::after.is-active{
11                background-position: 0 -50px;
12            }
13        }
14        .about-content {}

php
1    <div class="wrapper">
2        <a class="readmore-btn" href="">
3            READ MORE
4        </a>
5        <div class="content">

試したこと

下記のコードおよび、aを.readmore-btnにしても同様に動きませんでした。

css
1#about {
2    padding: 125px 6.67% 77px;
3    overflow: hidden;
4    p {
5        margin-top: 70px;
6        padding: 0 2%;
7    }
8    .wrapper {
9        display: block;
10        margin: 70px auto 0;
11        width: 100%;
12        a {
13            display: flex;
14            justify-content: center;
15            align-items: center;
16            width: 100%;
17            height: 89px;
18            font-family: "Futura Midium", sans-serif;
19            letter-spacing: 0.15em;
20            &::after {
21                content: "";
22                margin-left: 20px;
23                background: url(../imgs/top/down_arrow.png);
24                background-size: contain;
25                width: 10px;
26                height: 10px;
27            }
28            .is-active::after{
29                transform: rotate(180deg);
30            }
31@media (max-width:700px) {
32    #about {
33        padding: calc(125px * 0.9) 6.67% calc(77px * 0.9);
34        p {
35            margin-top: calc(70px * 0.9);
36        }
37        .wrapper {
38            margin: calc(70px * 0.9) auto 0;
39            a {
40                height: calc(89px * 0.9);
41                &::after {
42                    margin-left: calc(20px * 0.9);
43                    width: calc(10px * 0.9);
44                    height: calc(10px * 0.9);
45                }
46                .is-active::after {
47                    transform: rotate(180deg);
48                }
49            }

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

回答1件

ベストアンサー

勝手に疑似要素::afterが半回転して上向きになることは無いので、
上向きの画像に入れ替えてあげるか、

css
1transform: rotate(180deg);

この記述をcloseの時の疑似要素::afterに付けてあげると上向きになると思う。

追記
&::after.is-activeこの記述なんだけども使えるかちょっと分からないです。
検証ツールでこの順番で記述すると弾かれて通りません。
疑似要素にクラスを指定することになるので構文エラーじゃないかなぁと思います。
a.is::afterの順番にした方が良いかも。

投稿2021/03/16 00:02

編集2021/03/16 00:20

退会済みユーザー

総合スコア0

scottie320

2021/03/16 13:27

回答ありがとうございます。いただいたコードを試してみましたが、動きませんでした。試したコードを追記しましたので、ご確認いただければと思います。 is-activeの順番変更は必要そうですね。下記、同じような形でボタンを回転させてますが、自分では違いに気づけず…。 https://sakic.jp/demo/jquery/accordion/

退会済みユーザー

2021/03/16 23:53

えっと、URLのアコーディオンを一通りポチって見ましたが、動いてますよ？矢印も上向きになっております。夜中に頑張られた感じでしょうか？でなければ、ブラウザのキャッシュが効いてると思われますので、キャッシュをクリアしてみてください。※Ctrl+F5でも可

scottie320

2021/03/17 02:33

説明不足でした。リンクは参考サイトで私が作成したものではありません。試したことにより詳細なコードを掲載しました。よろしければ御確認いただければと存じます。

退会済みユーザー

2021/03/17 06:09

CSSはSCSSだと思うのですが閉じカッコが足りて無かったです。実際には足りてますか？それから.is-active::afterこれの前に&が必要になるかと思います。 a.is-active::afterと指定したいはずなので。

scottie320

2021/03/18 03:09

&を入れることで問題なく動かせました。ご回答ありがとうございました。