使用 JavaScript 切换（显示/隐藏）子菜单答案

【问题标题】：Toggle (show/hide) a sub menu with JavaScript使用 JavaScript 切换（显示/隐藏）子菜单
【发布时间】：2011-09-19 07:09:55
【问题描述】：

我正在开发一个不能使用 jQuery 的网站（请不要使用 cmets 说明它有多好，这是被禁止的），我需要复制 .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"。这也需要在同一页面中处理多个案例。

有人可以帮我吗？

提前谢谢你！

【问题讨论】：

标签： javascript dom

【解决方案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>

【讨论】：

我假设displayText id 指的是锚标签？此外，您的答案不处理更改锚的类（而不是文本）的要求。
没有，直到 3 分钟！ :P 有一种简单的方法来处理不具有侵入性的事件吗？所以我不能在<a /> 上使用 onclick="" 吗？谢谢！
如果你不能使用像 jQuery 这样的框架，你需要在锚点上使用 onClick 属性。