使用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>