実現させたいこと

CSSの疑似要素の現在の状態（今、:beforeなのか:afterなのか）を取得したいです。（その値によってjQueryの処理を分岐させたい）

現在の状況

CSSとjQueryで実装したアコーディオンメニュー（ＦＡＱ）があり、before:では「＋」ボタン、after:では「－」ボタンを表示させています。「＋」がクリックされると「－」ボタンに変わり付随するメニューが表示されます。「－」がクリックされると「＋」ボタンに変わり付随するメニューを隠します。

このアコーディオンメニューに対して、「全て表示」「全て非表示」というボタンを設置し、すべての付随するメニューを表示させたり、すべてを隠したりしたいです。

「全て非表示」はページリロードで対応しているので希望通りの動作になります。「全て表示」では、クリックイベントを発生させて、「＋」を「－」に反転させています。そのため、再度クリックすると、すべて「－」が「＋」に変わったり、もともとユーザーの操作で「－」になっているものは「＋」に変わったりします。

そのため、先に現在の状態を取得し（:before「＋」なのか:after「－」なのか）、「＋」の時のみjQueryのクリックイベントによる処理をさせたいです。疑似要素の現在の状態を取得する方法はありますか。ない場合、どのような方法で実装できるかアドバイスをいただけないでしょうか。

コード

html
1<html lang="ja">
2<head>
3<meta charset="utf-8">
4<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
5</head>
6<body>
7<div class="container">
8  <div class="switch">
9    <input type="button" class="list_display" value="全て表示"></input>　 
10    <input type="button" class="list_hide" value="全て非表示"></input>
11  </div>
12
13  <div class="toggle_title">
14    <div>果物<span class="toggle_btn">開く</span></div>
15  </div>
16  <div class="box_inquiry">
17    <ul class="target">
18      <li class="toggle_title2"><p>Ｑ．りんご</p><span class="toggle_btn_w">開く</span></li>
19      <li class="answer"><p>Apple</p></li>
20    </ul>
21    <ul class="target">
22      <li class="toggle_title2"><p>Ｑ．みかん</p><span class="toggle_btn_w">開く</span></li>
23      <li class="answer"><p>Orange</p></li>
24    </ul>
25    <ul class="target">
26      <li class="toggle_title2"><p>Ｑ．メロン</p><span class="toggle_btn_w">開く</span></li>
27      <li class="answer"><p>Melon</p></li>
28    </ul>
29  </div>
30
31
32  <div class="toggle_title">
33    <div>干支<span class="toggle_btn">開く</span></div>
34  </div>
35  <div class="box_inquiry">
36    <ul class="target">
37      <li class="toggle_title2"><p>Ｑ．ねずみ</p><span class="toggle_btn_w">開く</span></li>
38      <li class="answer"><p>Mouse</p></li>
39    </ul>
40    <ul class="target">
41      <li class="toggle_title2"><p>Ｑ．うし</p><span class="toggle_btn_w">開く</span></li>
42      <li class="answer"><p>Cow</p></li>
43    </ul>
44    <ul class="target">
45      <li class="toggle_title2"><p>Ｑ．とら</p><span class="toggle_btn_w">開く</span></li>
46      <li class="answer"><p>Tiger</p></li>
47    </ul>
48  </div>
49
50  <div class="toggle_title">
51    <div>教科<span class="toggle_btn">開く</span></div>
52  </div>
53  <div class="box_inquiry">
54    <ul class="target">
55      <li class="toggle_title2"><p>Ｑ．英語</p><span class="toggle_btn_w">開く</span></li>
56      <li class="answer"><p>English</p></li>
57    </ul>
58    <ul class="target">
59      <li class="toggle_title2"><p>Ｑ．数学</p><span class="toggle_btn_w">開く</span></li>
60      <li class="answer"><p>Mathmatics</p></li>
61    </ul>
62    <ul class="target">
63      <li class="toggle_title2"><p>Ｑ．国語</p><span class="toggle_btn_w">開く</span></li>
64      <li class="answer"><p>Japanese</p></li>
65    </ul>
66  </div>
67</div>
68
69</body>
70</html>

css
1ul {
2  list-style: none;
3}
4.answer {
5  width: 90%;
6  display: none;
7  background: #f2f2f2;
8  margin-left: 1em;
9  padding: 10px;
10  margin-bottom: 10px;
11}
12
13div.{
14  cursor: pointer;
15  margin-bottom: 5px;
16}
17p.table_title:hover {
18  text-decoration: none;
19}
20div.box_inquiry {
21  display: none;
22}
23
24.toggle_title, .toggle_title2 {
25  position: relative;
26  cursor: pointer;
27  height: 30px;
28}
29.toggle_title:hover,.toggle_title2:hover {
30  text-decoration: none;
31}
32
33.toggle_btn, .toggle_btn_w {
34  position: absolute;
35  top: 50%;
36  right: 10px;
37  transform: translateY(-50%);
38  background: #504946;
39  display: block;
40  width: 24px;
41  height: 24px;
42  text-indent: 100%;
43  white-space: nowrap;
44  overflow: hidden;
45  border-radius: 50%;
46}
47.toggle_btn_w {
48  border: solid 0.5px #504946;
49  background: #fff;
50  width: 20px;
51  height: 20px;
52}
53
54.toggle_btn:before, .toggle_btn:after,
55.toggle_btn_w:before, .toggle_btn_w:after {
56  display: block;
57  content: '';
58  background-color: #fff;
59  position: absolute;
60  width: 10px;
61  height: 2px;
62  top: 50%;
63  left: 50%;
64  transform: translate(-50%, -50%);
65}
66.toggle_btn_w:before, .toggle_btn_w:after {
67  background-color: #504946;
68}
69.toggle_btn:before, .toggle_btn_w:before {
70  width: 2px;
71  height: 10px;
72}
73
74.toggle_title.selected .toggle_btn:before {
75	content: normal;
76}
77.toggle_title.selected .toggle_btn_w:before {
78	content: normal;
79}
80.toggle_title2.selected .toggle_btn:before {
81	content: normal;
82}
83.toggle_title2.selected .toggle_btn_w:before {
84	content: normal;
85}
86.container {
87  width: 500px;
88  padding: 15px 0px;
89}
90.switch {
91  padding: 50px 0;
92}

JavaScript
1$(function(){
2	$('.toggle_title').click(function(){
3		$(this).toggleClass('selected');
4		$(this).next().slideToggle();
5	});
6});
7$(function(){
8	$('.toggle_title2').click(function(){
9		$(this).toggleClass('selected');
10		$(this).next().slideToggle();
11	});
12});
13$(document).ready(function(){
14  $('.question').on("click", function() {
15    $(this).next().slideToggle(200);
16  });
17});
18
19$(function(){
20  $(document).on('click', '.list_display', function(){
21      $('.toggle_title').click();
22  });
23});
24
25$(function(){
26  $(document).on('click', '.list_hide', function(){
27      location.reload();
28  });
29});

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

回答2件

Window.getComputedStyle()
こちらの関数を使用すれば疑似要素のプロパティを取得できますので処理分けできるのではないでしょうか。

下記に回答を追記しました。
＋とーの表現のコントロールが、selectedクラスの有無で行われている（これと疑似要素beforeの有無が連動する）ので、上記の関数の使用は適切ではないですね。失礼しました。
上記の関数は、疑似要素のプロパティを取れるので、例えば疑似要素のcontentプロパティなどで＋とーの表現のコントロールをしていたら、処理の出しわけが可能そうです。

今回の実装は、selectedクラスの有無（疑似要素beforeの有無）でコントロールされていましたので、hatena19さんの回答が一番見通しが良く実現可能な実装かと思います。

私のほうでは、.not()関数を使わないパターンを記載しておきます。
「すべて表示」ボタンを押下したときに、toggle_titleクラスが付与されている要素を走査して、selectedクラスが付与されている場合にifで処理分けしています。
「すべて非表示」ボタンも、同じように対応できるかと思います。

javascript
1$(function(){
2  $(document).on('click', '.list_display', function(){
3    $('.toggle_title').each(function(index, item){
4
5      //下記のif内で使い回すため変数に格納する。その都度jQueryオブジェクトを作っているとコストがかかるので、使い回すのが決まっている場合は、変数に格納して使うとパフォーマンスの改善に繋がります。
6      $toggleTitle = $(item);
7
8      if(!$toggleTitle.hasClass('selected')) { // toggle_title が selected を持っていないとき
9        $toggleTitle.addClass('selected');
10        $toggleTitle.next().slideToggle();
11      }
12    })
13  });
14});

投稿2021/01/09 15:30

編集2021/01/11 08:11

tmykndr

総合スコア74

pop-po

2021/01/10 08:31

ありがとうございます。リンク先のサイトを確認させていただきました。キーワード検索で他サイトも調べてみたのですが、:beforeや:afterに設定されているプロパティの内容自体は取得＆変更できそうですが、ブラウザ上の要素の状態が、今、beforeなのかafterなのかを取得する方法に未だたどり着けていません…

tmykndr

2021/01/11 08:13

回答を追記して、参考コードを記載いたしました。理解の一助になれば幸いです。

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

ベストアンサー

そんなに難しく考えずに、下記でいいのでは。

js
1$(function(){
2  $(document).on('click', '.list_display', function(){
3      $('.toggle_title').addClass('selected')
4                        .next().slideDown(200);
5  });
6});

すべて閉じるのはリロードしなくても、下記でどうでしょう。

js
1$(function(){
2  $(document).on('click', '.list_hide', function(){
3      $('.toggle_title').removeClass('selected')
4                        .next().slideUp(200);
5  });
6});

下記の方がシンプルですね。

js
1$(function(){
2  $(document).on('click', '.list_display', function(){
3      $('.toggle_title').not('.selected').click();
4  });
5  $(document).on('click', '.list_hide', function(){
6      $('.toggle_title.selected').click(); 
7  });
8});

投稿2021/01/10 05:01

編集2021/01/10 05:24

hatena19

総合スコア33790

pop-po

2021/01/10 06:49

ありがとうございます！「.selected」でイベント実行できるのですね！先にご提案いただいたプログラムも、シンプルバージョンも、どちらも試し、希望する動作になりました。「全て非表示」についても、リロードでの対応は逃げだったので（既に表示されているものを非表示にする処理が分からなくて）、教えていただくことができて、本当に助かりました。とても勉強になりました。本当にどうもありがとうございました。

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

あなたの回答