アコーディオンで多階層のメニューを作りたい【HTML.CSS.JS.jQuery】

アコーディオンで多階層のメニューを作る【HTML.CSS.JS.jQuery】
↓↓の参考URLのようなアコーディオンにもう1つ機能を加えたで多階層のメニューを作りたいのですが、やり方がわかりません。
誰た教えてください。

https://125naroom.com/web/3046#s_07

上の参考URLのアコーディオンメニューで

・1番上の階層 赤、青、黄色 の3階層を開いた時に
他の色のアコーディオンも自動で閉じるようにしたい。

・１つ下の階層　例）赤 ＞A、B があり、その中のAを開いた状態から
Bを開いたときにAを自動で閉じるようにしたい。（つまり1つのメニューしか開かないようにする。）

・1番上の階層 赤、青、黄色 の3階層を閉じた時に
一つ下の階層 A,Bが開いていたとしても最初の様に全て閉じた状態にする。

以上の3点をやりたいと思います。

誰か手ほどきをお願いいたします。

No.1 回答者： fujillin 回答日時： 2020/12/17 11:18

こんにちは

スクリプトは見ていませんが・・・

ご提示のサイトの2番目に「アコーディオン、一つ開けると他は閉じる」ってのがあるので、最初のご質問はこれで良いのでは？
考え方としては、どこかの項目を開く前に「他の項目（全部）を閉じる」あるいは「前に開いていた項目を閉じる」とすることです。
「全部閉じる」でも問題ないので、前者の方が仕組みとしては簡単です。

2番目のご質問は、同じページの7番目に「アコーディオンで多階層のメニューを作る」ってのがあるので、構造的にはこれでできるでしょう。
ただし、この例は開きっ放しなので…

3番目のご質問を実現するのには、2番目の構造のものを修正して、1番目の考え方を付け加えれば良いってことになります。