[英]Toggle (show/hide) a sub menu with JavaScript
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. 我正在开发一个我不能使用jQuery的网站(请禁止使用,它没有任何评论,这是禁止的),我需要重现.toggle()之类的内容,仅用于显示/隐藏带有类的div。
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"> </a>
</div>
<h2>Example case</h2>
<div class="box-submenu hidden">
<ul />
</div>
</div>
I need that click on the <a />
inside the <div class="box-utils" />
shows/hide the box-submenu class. 我需要单击
<div class="box-utils" />
内的<a />
以显示/隐藏box-submenu类。 When it's hidden, the <a />
needs to have class="down", when it's not hidden it needs to be class="up". 隐藏时,
<a />
必须具有class =“ down”,没有隐藏时,其必须具有class =“ up”。 This also needs to work with more than one case in the same page. 这也需要在同一页面中处理多个案例。
Can someone help me? 有人能帮我吗?
Thank you in advance! 先感谢您!
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. 创建一个如下所示的切换功能,在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.