在此程序中,当鼠标移到其他菜单项时,子菜单项不会隐藏。我想在鼠标从其区域移开时隐藏子菜单项。您能帮我吗?我真的想单击鼠标左键。
#main li{
list-style-type: none;
display: none;
text-decoration: none;
}
#main{
cursor: pointer;
}
#pappaya {
background-color:#339933;
text-decoration: none;
}
#pappayas {
background-color:#339933;
text-decoration: none;
}
.orang{
text-decoration: none;
}
#pappaya li{
text-decoration: none;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="mango.css">
<script>
function mangoGrape(selector){
document.querySelectorAll(selector)
.forEach(function(node){
node.style.display="block";
})
}
</script>
</head>
<body>
</body>
<ul id="main" onclick="mangoGrape('.apple')">main1
<div id="pappaya">
<li class="apple"> <a href="#">sub1</a></li>
<li class="apple"><a href="#">sub2</a></li>
<li class="apple"><a href="#">sub3</a></li>
</div>
</ul>
<ul id="main" onclick="mangoGrape('.orang')">main2
<div id="pappayas">
<a href="#"><li class="orang">sub21</li></a>
<a href="#"><li class="orang">sub22</li></a>
<a href="#"><li class="orang">sub23</li></a>
</div>
</ul>
</html>
在此程序中,当鼠标移至其他菜单项时,子菜单项不会隐藏。我要在鼠标从其区域移动时隐藏子菜单项。与此代码相关的另一个问题是文本修饰属性无法正常工作。
最佳答案
您只是忘了隐藏另一个项目:
/*Do not show li when page showed/ li { display: none; }*/
#main li{
list-style-type: none;
display: none;
text-decoration: none;
}
#main{
cursor: pointer;
}
#pappaya {
background-color:#339933;
text-decoration: none;
}
#pappayas {
background-color:#339933;
text-decoration: none;
}
.orang{
text-decoration: none;
}
#pappaya li{
text-decoration: none;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="mango.css">
<script>
function mangoGrape(selector){
// hide all lis first
document.querySelectorAll('li')
.forEach(function(node){
node.style.display="none";
})
// then show what you want
document.querySelectorAll(selector)
.forEach(function(node){
node.style.display="block";
})
}
</script>
</head>
<body>
<ul id="main" onclick="mangoGrape('.apple')">main1
<div id="pappaya">
<li class="apple"> <a href="#">sub1</a></li>
<li class="apple"><a href="#">sub2</a></li>
<li class="apple"><a href="#">sub3</a></li>
</div>
</ul>
<ul id="main" onclick="mangoGrape('.orang')">main2
<div id="pappayas">
<a href="#"><li class="orang">sub21</li></a>
<a href="#"><li class="orang">sub22</li></a>
<a href="#"><li class="orang">sub23</li></a>
</div>
</ul>
</body>
</html>