【jQuely】擬似要素をセレクターとして指定する方法はありますか？

【アコーディオンメニュー】を作成しています。

やりたいこと
クリックしたら<dd>が出るのと同時に、擬似要素の矢印の角度も変えたいと思っています。
dt::after{
content: "\f107";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 32px;
position: absolute;
right:32px;
}
矢印はFontAwesomeでアイコンを入れていますので、この角度を反転させる用に
.action-deg{
transform: rotate(-180deg);
}
を入れてクリックイベントで動かそうとしています。

が擬似要素（dt::after）をセレクターとして指定する方法がわかりません、というよりそんな方法はない？
のかなと思ったので代替案があれば助かります。

よろしくお願いいたします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<dl class="accorion-menu">
    <dt>メニュー1</dt>
    <dd>
        ここに文章が入ります。ここに文章が入ります。
        ここに文章が入ります。ここに文章が入ります。
        ここに文章が入ります。ここに文章が入ります。
        ここに文章が入ります。ここに文章が入ります。
        ここに文章が入ります。ここに文章が入ります。
        ここに文章が入ります。ここに文章が入ります。
    </dd>

    <dt>メニュー2</dt>
    <dd>
        ここに文章が入ります。ここに文章が入ります。
        ここに文章が入ります。ここに文章が入ります。
        ここに文章が入ります。ここに文章が入ります。
        ここに文章が入ります。ここに文章が入ります。
        ここに文章が入ります。ここに文章が入ります。
        ここに文章が入ります。ここに文章が入ります。
    </dd>

    <dt>メニュー3</dt>
    <dd>
        ここに文章が入ります。ここに文章が入ります。
        ここに文章が入ります。ここに文章が入ります。
        ここに文章が入ります。ここに文章が入ります。
        ここに文章が入ります。ここに文章が入ります。
        ここに文章が入ります。ここに文章が入ります。
        ここに文章が入ります。ここに文章が入ります。
    </dd>
</dl>







<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/c4b97a70eb.js" crossorigin="anonymous"></script>

<!-- jQUely -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- js -->
<script src="script.js"></script>
</body>
</html>
コード

@charset "utf-8";

.accorion-menu{
    width: 1000px;
    margin: 40px auto 40px;
}
dt{
    height: 48px;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    padding-left: 32px;
    padding-right: 32px;
    font-weight: bold;
    position: relative;
}
dt::after{
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 32px;
    position: absolute;
    right:32px;
}
.action-deg{
    transform: rotate(-180deg);
}
dd{
    width: 940px;
    margin: 16px auto 16px;
    display: none;
}
コード

$(function(){
    $(function(){
        $(".accorion-menu dt").on("click", function() {
        $(this).next().slideToggle();
    });
});

});
コード

K_3578

2021/04/05 09:17

疑似要素のプロパティを操作したいって認識で合ってるなら https://techmemo.biz/javascript/jquery-pseudo-operation/ とか役に立ちそうですが如何でしょうか。

退会済みユーザー

2021/04/05 10:17

回答ありがとうございます。 toggleClassなどで、角度変更用のCSSを付与した場合、thisで指定しているためdtすべてが 180度回転してしましまい、矢印だけ開店することができませんでした。

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

回答1件

ベストアンサー

記事要素自体にクラスを付加できないので、親に付加すれはいいでしょう。

css
1.action-deg::after {
2    transform: rotate(-180deg);
3}

js
1$(function(){
2  $(function(){
3    $(".accorion-menu dt").on("click", function() {
4      $(this).toggleClass("action-deg")
5             .next().slideToggle();
6    });
7  });
8});

投稿2021/04/05 11:08

hatena19

総合スコア33790

退会済みユーザー

2021/04/05 11:28

無事解決しました、ありがとうございます。ちなみにこの場合の「親」はどこに該当しますか？ ::after(擬似要素)が追加されたように見えるのですが、dt::afterで指定するのはわかりますが、dt::afterではなく.action-deg::afterという指定で角度が変えられるかちょっと不思議ではありあます。

hatena19

2021/04/05 12:10 編集

dt::after はdtの疑似要素でこれはdtの子要素ですから、疑似要素から見たらdtが親です。 jQuery でクリックしたdtにaction-degクラスを付加していますので、省略せずに下記のように記述すると分かり安いかな。 .accorion-menu dt.action-deg::after

退会済みユーザー

2021/04/06 12:39

なるほど理解できました！ありがとうございます！

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