使用JavaScript切換（顯示/隱藏）子菜單

Question

我正在開發一個我不能使用jQuery的網站（請禁止使用，它沒有任何評論，這是禁止的），我需要重現.toggle（）之類的內容，僅用於顯示/隱藏帶有類的div。

我有一組帶有箭頭的框，此箭頭可以展開子菜單。 讓我們來看一個例子：

<div class="box">
    <div class="box-utils">
        <a href="#" class="up">&nbsp;</a>
    </div>

    <h2>Example case</h2>

    <div class="box-submenu hidden">
        <ul />
    </div>
</div>

我需要單擊<div class="box-utils" />內的<a />以顯示/隱藏box-submenu類。 隱藏時， <a />必須具有class =“ down”，沒有隱藏時，其必須具有class =“ up”。 這也需要在同一頁面中處理多個案例。

有人能幫我嗎？

先感謝您！

Answer 1

創建一個如下所示的切換功能，在DIV上提供id屬性（稱為box-submenu或其他名稱），然后從錨點調用該功能，然后使用ID查找要隱藏/顯示的內容。

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("box-submenu");
    var link = document.getElementById("linkId");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        link.className = "down";
    }
    else {
        ele.style.display = "block";
        link.className = "up";
    }
} 
</script>