ドリルダウンメニューを作っているのですが、クリックすると「+」が「-」になるようにしたいのですが、どのように書いたらいいでしょうか？

Question

HTMLとCSSとJavaScriptの初学者です。

【codepen】
https://codepen.io/sino3325/pen/KKQqMYj

私が書いたコードを上記のcodepenに挙げたので、よろしければ見て頂きたいのですが、

:after疑似要素を使い「+」を表示させているのですが、これをクリックすると「-」に変わり、もう一度押すと「+」に戻るようにしたいです。

ただ、この先どのように記述すればいいのかわからなくなりました。

疑似要素でそもそものHTMLやCSSの書き方を変えた方がいい可能性もあるかもしれないのですが、どうしたらいいか助言いただければ幸いです。

Answer 1

たとえば、.active_colorが付いていることを利用するといいかもしれません。

.drill_down_menu .parent_menu.active_color:after {
  content: '-';
}

Comments

[sino3325]

ありがとうございます！
おかげさまで解決しました。
JavaScriptを使わないとできないと思っていたのですが、CSSへの記述で解決できるんですね。