用JavaScript切换（显示/隐藏）子菜单 [英] Toggle (show/hide) a sub menu with JavaScript

问题描述

我正在开发一个不能使用jQuery的网站（请不要对它有多好，它是禁止的），我需要重现像.toggle（）只是为了显示/隐藏一个div与类。

I am developing a site where I can NOT use jQuery (please, no comments on how good is it, it's prohibited) and I need to reproduce something like .toggle() just for show/hide a div with a class.

我有一组箭头，这个箭头可以展开一个子菜单。让我们来看一个例子：

I've a group of boxes with a arrow, this arrow can expand a submenu. Let's see an example:

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

I need that click on the <a /> inside the <div class="box-utils" /> shows/hide the box-submenu class. When it's hidden, the <a /> needs to have class="down", when it's not hidden it needs to be class="up". This also needs to work with more than one case in the same page.

有人可以帮助我吗？

谢谢你提前！

推荐答案

创建一个如下所示的切换功能，在您的DIV上提供一个id属性（称为框-submenu或某些东西），并从您的锚点中调用该函数，并使用ID查找您想要隐藏/显示的任何内容。

Create a toggle function like the one below, provide an id attribute on your DIV (call it box-submenu or something) and call the function from your anchor, and use the ID to lookup whatever you want to hide/show.

<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切换（显示/隐藏）子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！