格納可能なセカンダリメニューを実装するための JavaScript

<!--プルリスト-->
<スタイル>
 
    li {
        /*li ドットをキャンセル*/
        リストスタイル: なし;
    }
 
    li span {
        /* span タグの背景画像を設定します (先頭に小さなプラス記号とマイナス記号、繰り返しなし、初期位置 0 0)*/
        背景: url(add.png) 繰り返しなし 左中央;
        左パディング: 20px;
    }
 
    /*開始スタイル*/
    li ul{
        高さ: 0;
        /*オーバーフローは非表示*/
        オーバーフロー: 非表示;
        /*トランジション効果を追加*/
        遷移: すべて 0.5 秒;
    }
    /*スタイルを展開*/
    。開ける{
        背景画像: url(minus.png);
    }
    .open+ul{
        高さ: 70px;
    }
 
 
</スタイル>
 
 
<ul class="tree">
    <li><span class="open">出席管理</span>
        <ul>
            <li>毎日の出席状況</li>
            <li>休暇申請</li>
            <li>残業出張</li>
        </ul>
    </li>
    <li><span>インフォメーションセンター</span>
        <ul>
            <li>毎日の出席状況</li>
            <li>休暇申請</li>
            <li>残業出張</li>
        </ul>
    </li>
    <li><span>コラボレーションオフィス</span>
        <ul>
            <li>毎日の出席状況</li>
            <li>休暇申請</li>
            <li>残業出張</li>
        </ul>
    </li>
</ul>
 
<script src="mJS.js"></script>

// プルアウトリスト // 実装のアイデア:
 
var spans = document.querySelectorAll(".tree span");
 
(var i = 0; i < spans.length; i++) の場合 {
    spans[i].onclick = 関数 () {
        // コンソールログ(これ);
        // 変更する要素スパンを検索 // クラスを変更、削除、または追加 -> 開く
        // 自分自身が開いているかどうかを確認し、開いている場合は削除します。
        // this -> イベントをトリガーした要素を指します if (this.className == "open") {
            // ある場合は削除してください。
            this.className = "";
        } それ以外 {
            // そうでない場合は、それを追加し、すでに開いている他のものを削除します。
            // open 属性の open (li) を検索します
            var openSpan = document.querySelector(".tree.open")
            （openSpan !== null）の場合{
                // コレクションが空でない場合は、その open 属性を削除します。 openSpan.className = "";
            }
            // 自分自身のオープン属性を設定します this.className = "open";
        }
 
 
    }
}