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>

我需要点击<a />内的<div class="box-utils" />显示/隐藏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>

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

1 个答案: