DEITOUDA
色んな事を試してみるところ
ツリーメニュー1
プルダウンメニュー
・スマホ向けおみくじ
■ツリーメニュー その1

本当はこんなのを作りたかったけど、動的にやるには思っていたよりも結構根本の所から弄らなきゃならないことに気付いた。
なので、それを実際やる前に表示部分の所だけ実際に作ってみて残しておく。
サンプル

ソース

JavaScriptは以下
<script Language="JavaScript"><!--
trList = ["y2020","y2019","y2018"];    // ツリーメニューのリスト
function exMenu(tName)
{
    for (i=0; i<trList.length; i++) eval(trList[i]).style.display = "none";
    tMenu = eval(tName).style;
    if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none";
}
// --></script>


HTML部分は以下の感じ
■ツリーメニュー<br><br>
<a href="javaScript:exMenu('y2020')">2020年</a><br>
<div id="y2020">
 <a href="#202003">03月</a><br>
 <a href="#202002">02月</a><br>
 <a href="#202001">01月</a><br>
</div>

<a href="javaScript:exMenu('y2019')">2019年</a><br>
<div id="y2019" style="display:none">
 <a href="#201912">12月</a><br>
 <a href="#201911">11月</a><br>
 <a href="#201910">10月</a><br>
 <a href="#201909">09月</a><br>
 <a href="#201908">08月</a><br>
 <a href="#201907">07月</a><br>
 <a href="#201906">06月</a><br>
 <a href="#201905">05月</a><br>
 <a href="#201904">04月</a><br>
 <a href="#201903">03月</a><br>
 <a href="#201902">02月</a><br>
 <a href="#201901">01月</a><br>
</div>

<a href="javaScript:exMenu('y2018')">2018年</a><br>
<div id="y2018" style="display:none">
 <a href="#201812">12月</a><br>
 <a href="#201811">11月</a><br>
 <a href="#201810">10月</a><br>
 <a href="#201809">09月</a><br>
 <a href="#201808">08月</a><br>
</div>

style="display:none"
↑が付いてるDIVは最初畳まれて表示されない。
このソースでは最初2020年の部分は月毎のリストが表示されるようにしているが、畳んでおきたい場合は付ければいい。
※本当は表示させたい場合は↓と書いておけばよかったみたい。 style="display:block"

trList = ["y2020","y2019","y2018"];
↑の部分に書き加えれば増減できる。
この例では「y2020」と命名してるが「2020」とか「2020y」と命名して試したら駄目だった。
数字から始まるのは駄目みたい。

参考にしたサイト