求帮忙写个js展开菜单
发布网友
发布时间：2022-10-18 18:02
共2个回答
热心网友
时间：2023-11-22 19:42
<ul style="display: none;" id="ul1">
<li><a href="/agent/Order.asp" data-original-title="子菜单1"><span class="hidden-minibar "> 子菜单1</span></a></li>
<li><a href="/agent/OrderBuy.asp" data-original-title="子菜单2"><span class="hidden-minibar "> 子菜单2</span></a></li>
<li><a href="/agent/tkinfo.asp" data-original-title="子菜单3"><span class="hidden-minibar "> 子菜单3</span></a></li>
</ul>
</li>
<li class="submenu"><a class="dropdown " href="javascript:showMenu(2);;" data-original-title="主菜单2"><span aria-hidden="true" class="icon icon-magnifier-add"></span><span class="hidden-minibar "> 主菜单2</span><span class="fa arrow"></span></a>
<ul style="display: none;" id="ul2">
<li><a href="/agent/Order.asp" data-original-title="子菜单1"><span class="hidden-minibar "> 子菜单1</span></a></li>
<li><a href="/agent/OrderBuy.asp" data-original-title="子菜单2"><span class="hidden-minibar "> 子菜单2</span></a></li>
<li><a href="/agent/tkinfo.asp" data-original-title="子菜单3"><span class="hidden-minibar "> 子菜单3</span></a></li>
</ul>
</li>
<script>
function showMenu(s){
if(s == 1){
document.getElementById("ul1").style.display="block";
document.getElementById("ul2").style.display="none";
}else if(s == 2){
document.getElementById("ul2").style.display="block";
document.getElementById("ul1").style.display="none";
}
}
</script>
这样就行了
追答数量是不定的还是有定值?如果数量是定值的话,就在ul标签上加ID,然后在showMenu方法里面往上叠加就行
热心网友
时间：2023-11-22 19:43
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>menu</title>
<style type="text/css">
</style>
<script type="text/javascript">
onload = function ()
{
var lis = document.querySelectorAll ("li.submenu");
var funny = function (i)
{
lis[i].onclick = function ()
{
var status = this.querySelector ("ul").style.display;
this.querySelector ("ul").style.display = status == "none" ? "block" : "none";
if (lis.index >= 0 && lis.index != i)
{
lis[lis.index].querySelector ("ul").style.display = "none";
}
lis.index = i;
};
};
for ( var i = 0; i < lis.length; i++)
{
funny (i);
}
}
</script>
</head>
<body>
<ul>
<li class="submenu"><a class="dropdown " href="javascript:;" data-original-title="主菜单1"><span aria-hidden="true"
class="icon icon-magnifier-add"></span><span class="hidden-minibar "> 主菜单1</span><span class="fa arrow"></span> </a>
<ul style="display: none;">
<li><a href="/agent/Order.asp" data-original-title="子菜单1"><span class="hidden-minibar "> 子菜单1</span> </a>
</li>
<li><a href="/agent/OrderBuy.asp" data-original-title="子菜单2"><span class="hidden-minibar "> 子菜单2</span> </a>
</li>
<li><a href="/agent/tkinfo.asp" data-original-title="子菜单3"><span class="hidden-minibar "> 子菜单3</span> </a>
</li>
</ul></li>
<li class="submenu"><a class="dropdown " href="javascript:;" data-original-title="主菜单2"><span aria-hidden="true"
class="icon icon-magnifier-add"></span><span class="hidden-minibar "> 主菜单2</span><span class="fa arrow"></span> </a>
<ul style="display: none;">
<li><a href="/agent/Order.asp" data-original-title="子菜单1"><span class="hidden-minibar "> 子菜单1</span> </a>
</li>
<li><a href="/agent/OrderBuy.asp" data-original-title="子菜单2"><span class="hidden-minibar "> 子菜单2</span> </a>
</li>
<li><a href="/agent/tkinfo.asp" data-original-title="子菜单3"><span class="hidden-minibar "> 子菜单3</span> </a>
</li>
</ul></li>
</ul>
</body>
</html>
