我有一个带子菜单的垂直菜单,我只想在点击父级时显示子菜单,一次只显示一个子菜单。但事情是,当点击其他父菜单时,其子菜单显示但也可以看到前一个子菜单。我如何隐藏以前的子菜单?请帮忙 。我是javascript的新手。 这是我的html-css-javascript代码。
<div class="menu">
<ul >
<li><a href="#" onclick= "Myfunction('cert')">Contacts</a>
<div style="display: none;" id="cert">
<ul >
<li >Submenu 1</li>
<li>submenu 2</li>
</ul>
</div>
</li>
<li><a href="#" onclick="Myfunction('defect')">About</a>
<div style="display: none;" id="defect">
<ul >
<li>menu 1</li>
<li>menu 2</li>
</ul>
</div>
</li>
</ul>
脚本
function Myfunction(obj) {
var ele=document.getElementById(obj).style;
if(ele.display=="none") {
ele.display="block";
} else { ele.display="none"; }
}
答案 0 :(得分:1)
最简单的方法是使用全局JavaScript变量,尽管它不是很优雅。由于您没有使用任何JavaScript库,例如 jQuery 其他一切都会变成一堆遍历意大利面条的DOM。
var openEle = null;
function Myfunction(obj) {
var ele = document.getElementById(obj);
if (openEle != null) {
openEle.style.display = "none");
}
if (ele.style.display == "none") {
openEle = ele;
ele.style.display = "block";
} else {
ele.style.display = "none";
}
}
答案 1 :(得分:0)
您可以使用:
<强> Demo here 强>
var lastid;
function Myfunction(obj) {
var ele = document.getElementById(obj).style;
var elemLastId = document.getElementById(lastid);
if (elemLastId != null) {
elemLastId.style.display = "none";
}
lastid = obj;
if (ele.display == "none") {
ele.display = "block";
} else {
ele.display = "none";
}
}
我创建了一个新变量来记住最后一个ID。所以你可以调用它并将display:none
应用于它。
答案 2 :(得分:0)
<a class="Label">Contacts</a>
<div>
<ul class="Submenu">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
<a class="Label">About</a>
<div>
<ul class="Submenu">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
并且:
(function($) {
$(function() {
$('.Label').on('click', function() {
$('.Submenu').hide();
$(this).next().find('.Submenu').show();
});
});
})(jQuery);
这就是jQuery方法。我会让另一个勇敢的家伙用本地人来做这件事:D