アコーディオンメニューの二階層について質問です。 【起きている問題】 添付の右の写真のアコーディオン

アコーディオンメニューの二階層について質問です。

【起きている問題】
添付の右の写真のアコーディオンメニューの全ての（▼）をクリックできません。
①ブラ&ショーツセット▼
②レッグウェア▼
のみ、クリックしても開きません。

また、左の画像は全ての▼が開きますが、上記の①、②の項目まで、バックカラーが黒になってしまいます。

CSSは、
・カテゴリから探す
・カラーから探す
・サイズから探す
のみ、バックカラーを黒にし、他の部分のバックカラーはグレーにしたいです。

【実行したいこと】
・全てのアコーディオンメニュー（▼）が開く様にしたい
・（カテゴリから探す▼）（カラーから探す▼）（サイズから探す▼）の項目のみ、バックカラーを黒にしたい。

上記を実現するにはどうしたらいいでしょうか？
助言お願い致します。

コード詳細は、下記リンクに記載してあります↓

https://docs.google.com/document/d/e/2PACX-1vQvq …

質問者からの補足コメント

• アコーディオンメニューの写真です

  
    補足日時：2021/10/24 17:24

No.1 ベストアンサー 回答者： sukitaro 回答日時： 2021/10/24 17:45

おそらくですが、

.accordion label{

となっているところを、

.accordion>label{

にすれば、意図したようになるのではないかと思います。

cssの意味としては、
修正前は、
accordionクラスの中にあるlabel要素全部
ですが、
修正後は、
accordionクラスのすぐ下にあるlabel要素だけ
（孫要素から中は含まない）
です。

この回答へのお礼

お礼が遅くなり、申し訳ございません。
解決しました！
ご親切にありがとうございました。

お礼日時：2021/11/07 00:55