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

我需要的是<a />点击里面的<div class="box-utils" />显示/隐藏盒子类。当它隐藏时，<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>