実現したいこと

アコーディオンメニューをクリックして開閉した際、右端につけたアイコンを右回りに半回転したいです。

発生している問題・分からないこと

上記のような内容は参考サイトやほかの皆様のご助力もあって大方完成しましたが、最初にクリックをしていないのに勝手に半周してしまうのを止めるべく、scriptを付けましたが、動かなくなってしまいました。
勝手に半周してしまうのを止めるにはここからどうすればよろしいでしょうか？

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

該当のソースコード

html、css、JavaScript
1<meta name="robots" content="noindex,nofollow" />
2<!doctype html>
3<html lang="ja">
4
5<head>
6  <meta charset="UTF-8" />
7  <meta name="viewport" content="width=device-width, initial-scale=1" />
8  <link rel="stylesheet" href="https://plot-hub.com/code_example/lib/css/reset.css">
9
10<style>
11/*カテゴリーボタン*/
12.button02 {
13  margin-left: 8rem;
14/*transform: rotate(90deg);*/
15}
16.button_animation{
17  transform: rotate(90deg);
18}
19.button02 {
20  /* スタイル用 */
21  display: block;
22  width: 30px;
23  height: 30px;
24  border-radius: 50%;
25  border: 1px solid #00a0e9;
26  /* スタイル用 */
27
28  position: relative;
29}
30
31.button02:before,
32.button02:after {
33  position: absolute;
34  content: '';
35}
36
37.button02:before {
38  top: 14px;
39  left: 6px;
40  width: 10px;
41  height: 1px;
42  background: #00a0e9;
43}
44.button02:after {
45  top: 11px;
46  left: 16px;
47  width: 0;
48  height: 0;
49  border-top: 4px solid transparent;
50  border-right: 0 solid transparent;
51  border-bottom: 0 solid transparent;
52  border-left: 5px solid #00a0e9;
53}
54.acd-check{
55    display: none;
56}
57.acd-label{
58  background: #e5f5fd;
59  margin-bottom: 1px;
60  padding: 10px;
61  display: flex;
62  justify-content: space-between;
63}
64.acd-content{
65    display: block;
66    height: 0;
67    opacity: 0;
68    padding: 0 10px;
69    transition: .5s;
70    visibility: hidden;
71}
72.acd-check:checked + .acd-label .button_animation .clicked {
73  animation: rotateAnimation .5s ease-out forwards;
74}
75.acd-check + .acd-label .button_animation .clicked {
76  animation: rotateAnimation2 .5s ease-in-out forwards;
77}
78@keyframes rotateAnimation {
79  from {
80    transform: rotate(90deg);
81  }
82  to {
83    transform: rotate(270deg);
84  }
85}
86@keyframes rotateAnimation2 {
87  from {
88    transform: rotate(-90deg);
89  }
90  to {
91    transform: rotate(90deg);
92  }
93}
94
95.acd-check:checked + .acd-label + .acd-content{
96    height: 50px;
97    opacity: 1;
98    padding: 10px;
99    visibility: visible;
100}
101</style>
102
103</head>
104
105<body>
106<input id="acd-check1" class="acd-check" type="checkbox">
107<label class="acd-label t-font25" for="acd-check1">クリックで開く1<i class="button02 button_animation"></i></label>
108<div class="acd-content"><p>hello.world!</p></div>
109        
110<input id="acd-check2" class="acd-check" type="checkbox">
111<label class="acd-label" for="acd-check2">クリックで開く2<i class="button02 button_animation"></i></label>
112<div class="acd-content"><p>hello.world2!</p></div>
113        
114<input id="acd-check3" class="acd-check" type="checkbox">
115<label class="acd-label" for="acd-check3">クリックで開く3</label>
116<div class="acd-content"><p>hello.world3!</p></div>
117        
118<input id="acd-check4" class="acd-check" type="checkbox">
119<label class="acd-label" for="acd-check4">クリックで開く4</label>
120<div class="acd-content"><p>hello.world4!</p></div>
121
122
123<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
124
125<script>
126const t = document.querySelector(".acd-check");
127const a = document.querySelector(".button_animation");
128t.addEventListener("click", (event) => {
129  a.classList.add("clicked");
130});
131</script>
132
133</body>
134</html>
135

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

前回質問をして、いただいたコードを参考に自分なりにアレンジをしてみましたが、上手くいきませんでした。
お教え頂ければ幸いです。

追記しました。

html、css、JavaScript
1<meta name="robots" content="noindex,nofollow" />
2<!doctype html>
3<html lang="ja">
4
5<head>
6  <meta charset="UTF-8" />
7  <meta name="viewport" content="width=device-width, initial-scale=1" />
8  <link rel="stylesheet" href="https://plot-hub.com/code_example/lib/css/reset.css">
9
10<style>
11/*カテゴリーボタン*/
12.button02 {
13  margin-left: 8rem;
14/*transform: rotate(90deg);*/
15}
16.button_animation{
17  transform: rotate(90deg);
18}
19.button02 {
20  /* スタイル用 */
21  display: block;
22  width: 30px;
23  height: 30px;
24  border-radius: 50%;
25  border: 1px solid #00a0e9;
26  /* スタイル用 */
27
28  position: relative;
29}
30
31.button02:before,
32.button02:after {
33  position: absolute;
34  content: '';
35}
36
37.button02:before {
38  top: 14px;
39  left: 6px;
40  width: 10px;
41  height: 1px;
42  background: #00a0e9;
43}
44.button02:after {
45  top: 11px;
46  left: 16px;
47  width: 0;
48  height: 0;
49  border-top: 4px solid transparent;
50  border-right: 0 solid transparent;
51  border-bottom: 0 solid transparent;
52  border-left: 5px solid #00a0e9;
53}
54.acd-check{
55    display: none;
56}
57
58.acd-label{
59  background: #e5f5fd;
60  margin-bottom: 1px;
61  padding: 10px;
62  display: flex;
63  justify-content: space-between;
64}
65.acd-content{
66    display: block;
67    height: 0;
68    opacity: 0;
69    padding: 0 10px;
70    transition: .5s;
71    visibility: hidden;
72}
73
74.acd-check:checked + .acd-label + .acd-content{
75    height: 50px;
76    opacity: 1;
77    padding: 10px;
78    visibility: visible;
79}
80.click1{ transform: rotate(270deg);transition: .5s;}
81.click2{ transform: rotate(450deg);transition: .5s;}
82</style>
83
84</head>
85
86<body>
87<input id="acd-check1" class="acd-check" type="checkbox">
88<label class="acd-label t-font25" for="acd-check1">クリックで開く1<i class="button02 button_animation"></i></label>
89<div class="acd-content"><p>hello.world!</p></div>
90        
91<input id="acd-check2" class="acd-check" type="checkbox">
92<label class="acd-label" for="acd-check2">クリックで開く2<i class="button02 button_animation"></i></label>
93<div class="acd-content"><p>hello.world2!</p></div>
94        
95<input id="acd-check3" class="acd-check" type="checkbox">
96<label class="acd-label" for="acd-check3">クリックで開く3</label>
97<div class="acd-content"><p>hello.world3!</p></div>
98        
99<input id="acd-check4" class="acd-check" type="checkbox">
100<label class="acd-label" for="acd-check4">クリックで開く4</label>
101<div class="acd-content"><p>hello.world4!</p></div>
102
103
104<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
105
106<script>
107const a = document.querySelector(".button_animation");
108document.addEventListener('click',e=>{
109  const t=e.target;
110  if(t.matches('.button_animation:not(.running)')){
111    t.classList.toggle('click1');
112    t.classList.toggle('click2',!t.classList.contains('click1'));
113  }
114});
115addEventListener("transitionstart", e=>{
116  const t=e.target;
117  t.classList.add('running');
118});
119document.addEventListener("transitionend",e=> {
120  const t=e.target;
121  t.classList.remove('running');
122  t.classList.remove('click2');
123});
124</script>
125
126</body>
127</html>

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

回答2件

ベストアンサー

.acd-check:checked+.acd-label .button_animation .clicked→.acd-check:checked+.acd-label .button_animation.clicked

もう一つも同様に。

投稿2025/03/14 00:12

Lhankor_Mhy

総合スコア37338

keel

2025/03/14 02:39

ご回答ありがとうございます。頂いたコードで試してみました。 2点お聞きしたいです。・頂いたコードに変更したところ上手く半回転したのですが、前のコードとどう違うのか分からないです...。空白くらいしか違いが見つからなかったのですが、どういうことなのでしょうか？・1つ目の.button02は半回転するようになったのですが、2つ目以降が効かなくなってしましました。効くようにするにはどうすればいいでしょうか？よろしくお願いいたします。

Lhankor_Mhy

2025/03/14 04:27

1. これです→ https://developer.mozilla.org/ja/docs/Web/CSS/Descendant_combinator --- 2. document.querySelector は最初の要素だけを抜き出します→ https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector querySelectorAll を使うとすべての要素を取得できますが、返ってくる値は配列ライクなものになりますので、forEach で処理をする必要があります。→ https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll#%E4%B8%80%E8%87%B4%E3%81%97%E3%81%9F%E3%83%AA%E3%82%B9%E3%83%88%E3%81%B8%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9 できそうですか？

keel

2025/03/24 09:42

遅れて大変申し訳ございません。時間がかかりましたがうまくいきました...。ありがとうございました。

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

最初にクリックをしていないのに勝手に半周してしまう

前回私が提示したクラスの付替えとtransitionの状態をみてtransformすればよいのでは？

参考

こんな感じでどうでしょう？

html
1<style>
2.wrap{
3position:static;
4}
5label:has(.acd-check){
6  position:relative;
7  z-index:2;
8}
9.acd-content p{
10margin:0;
11}
12label:has(.acd-check:not(:checked)) ~ .acd-content{
13 transform:translateY(-1.5em);
14 height:0;
15 transition: 0.5s;
16 z-index:1;
17}
18label:has(.acd-check:checked) ~ .acd-content{
19  height:2.5em;
20  transition: 0.5s;
21  transform:translateY(0);
22}
23.acd-check  ~ span{
24  display:inline-block;
25}
26.acd-check:not(:checked) ~ span.flag{
27  transform:rotate(calc(0deg ));
28}
29.acd-check:not(:checked) ~ span:not(.flag){
30  transform:rotate(calc(360deg ));
31  transition: 0.5s;
32}
33.acd-check:checked ~ span{
34  transform:rotate(180deg);
35  transition: 0.5s;
36}
37
38</style>
39<script>
40window.addEventListener('DOMContentLoaded', ()=>{
41  document.querySelectorAll('.acd-check ~ span').forEach(x=>x.classList.add('flag'));
42});
43
44document.addEventListener("click",e=> {
45  const t=e.target;
46  if(t.closest('.wrap').matches(':has(.running)')){
47    e.preventDefault();
48  }
49},true);
50document.addEventListener("transitionstart",e=> {
51  const t=e.target;
52  t.classList.add('running');
53});
54document.addEventListener("transitionend",e=> {
55  const t=e.target;
56  if(t.matches('.acd-check ~ span')){
57    t.classList.toggle('flag',t.matches('.acd-check:not(:checked) ~ span'));
58  }
59  t.classList.remove('running');
60});
61</script>
62<body>
63<div class="wrap">
64<label><input class="acd-check" type="checkbox">クリックで開く1<span>↓</span></label>
65<div class="acd-content"><p>hello.world!</p></div>
66</div>
67<div class="wrap">
68<label><input class="acd-check" type="checkbox">クリックで開く2<span>↓</span></label>
69<div class="acd-content"><p>hello.world2!</p></div>
70</div>
71<div class="wrap">
72<label><input class="acd-check" type="checkbox">クリックで開く3</label>
73<div class="acd-content"><p>hello.world3!</p></div>
74</div>
75<div class="wrap">
76<label><input class="acd-check" type="checkbox">クリックで開く4</label>
77<div class="acd-content"><p>hello.world4!</p></div>
78</div>

投稿2025/03/13 12:56

編集2025/03/14 04:48

yambejp

総合スコア117400

keel

2025/03/14 02:32

ご回答ありがとうございます。前回、yambejp様から頂いたコードを自分なりに付け替えたりしてみたのですが、よくわからなくなってきました... .button02をクリックした際に半回転することはできたのですが、これをinput(.acd-check)をクリックした際に回転させるようにするにはどうすればいいでしょうか？途中までのコードを追記します。よろしくお願いいたします。

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

あなたの回答