87,838
社区成员
发帖
与我相关
我的任务
分享js+css制作下拉菜单没有效果出来
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function showBar_left(li){
var ID=li.getElementByTagName("ul")[0];
ID.style.display="block";
}
function hidBar_left(li){
var ID=li.getElementByTagName("ul")[0];
ID.style.display="none";
}
</script>
<style>
#Bar_left li ul{ display:none}
</style>
</head>
<body>
<ul id="Bar_left">
<li onmouseover="showBar_left(this)" onmouseout="hidBar_left(this)">一级菜单1
<ul>
<li>2级菜单</li>
<li>2级菜单</li>
<li>2级菜单</li>
</ul>
</li>
<li onmouseover="showBar_left(this)" onmouseout="hidBar_left(this)">一级菜单2
<ul>
<li>2级菜单</li>
<li>2级菜单</li>
</ul>
</li>
</ul>
</body>
</html>
在线等,急!!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function showBar_left(li){
var ID=li.getElementByTagName("ul")[0];
ID.style.display="block";
}
function hidBar_left(li){
var ID=li.getElementByTagName("ul")[0];
ID.style.display="none";
}
</script>
<style>
#Bar_left li ul{ display:none}
</style>
</head>
<body>
<ul id="Bar_left">
<li onmouseover="showBar_left(this)" onmouseout="hidBar_left(this)">一级菜单1
<ul>
<li>2级菜单</li>
<li>2级菜单</li>
<li>2级菜单</li>
</ul>
</li>
<li onmouseover="showBar_left(this)" onmouseout="hidBar_left(this)">一级菜单2
<ul>
<li>2级菜单</li>
<li>2级菜单</li>
</ul>
</li>
</ul>
</body>
</html>
在线等,急!!
...全文
请发表友善的回复…
发表回复
moe_misaki 2015-07-09
- 打赏
- 举报
[quote=引用 2 楼 moe_misaki 的回复:]
<script language="javascript">
function showBar_left(id){
var ID=getElementById(id);
ID.style.display="block";
}
function hidBar_left(id){
var ID=getElementById(id);
ID.style.display="none";
}
</script>
这才是改好后的函数
moe_misaki 2015-07-09
- 打赏
- 举报
<script language="javascript">
function showBar_left(id){
var ID=li.getElementById("id");
ID.style.display="block";
}
function hidBar_left(id){
var ID=li.getElementById("id");
ID.style.display="none";
}
</script>
<style>
#Bar_left li ul{ display:none}
</style>
</head>
<body>
<ul id="Bar_left">
<li >一级菜单1
<div id="bar1" onmouseover="showBar_left(bar1)" onmouseout="hidBar_left(bar1)">
<ul>
<li>2级菜单</li>
<li>2级菜单</li>
<li>2级菜单</li>
</ul>
</div>
</li>
</ul>
</body>
不用this后换成这样写，然而还是没有效果
DaveLeeCN 2015-07-09
- 打赏
- 举报
this用的不对，你这里的this不是文档元素，也是这个整个标签，你可以在鼠标事件中alert（li）看一下就明白了。
moe_misaki 2015-07-09
- 打赏
- 举报
我去，还真是！！谢谢！！
ayayad 2015-07-09
- 打赏
- 举报
其实是getElementByTagName写错了，应该是getElementsByTagName，注意里面有个s
