javascript悬停左侧菜单时右侧菜单不显示是什么原因？求帮助！

mikeflxca 2018-12-07 09:18:31

首先应该实现：鼠标悬停“商品目录”时出现左侧菜单（位于其下方），这个通过css实现了。然后鼠标继续悬停于左侧菜单项时，右侧显示其对应的悬浮子菜单，移动左侧悬浮位置（左侧菜单项目）时，右侧子菜单交替显现。
此外需要实现：
鼠标移开左、右侧后，整个菜单画面除了“商品目录”之外，全部消失！也就是说右侧子菜单也消失。（当前，左侧菜单是通过css实现了鼠标移开后消失的。）

当前的问题是：
运行后右侧子菜单未能显示，进一步悬停左侧菜单时，右侧菜单也未相应轮动显示。

javascript写的哪里有错吗？哪位能给改一下或给个提示（最好直接先给改下，因为对Javascript不熟）？
下图显示：悬停"商品目录“时，左侧菜单显示了，继续划过左侧菜单，右侧是空的（别告诉我用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 charset="UTF-8">
<title>测试页面</title>
<style>
* {margin:0;padding:0;cursor:pointer;}
a {
font-family:Microsoft YaHei,Simsun;
}
.sa {float:left;margin-top:40px;margin-left:40px;position:relative;z-index:9999;
width:200px;height:500px;

}
.sbtn {
position:relative;z-index:99999;
}

.tnav {display:block;background-color:red;height:36px;}
.sa .sbtn h2 {
font-size:14px;
}
.sa .sbtn h2 a {
line-height:36px;background-color:;
padding-left:10px;width:180px;padding-right:10px;
text-decoration:none;
height:36px;color:#fff;weight:normal;display:block;
}
.sa .sbtn h2 a:hover {
background-color:purple;
}
.sa .sbtn ul li.s1 {}

.sa .sbtn ul {
position:absolute;z-index:99999;
width:200px;height:500px;top:36px;left:0px;
list-style:none;display:none;padding-top:10px;
background-color:#60a411;
}
.sa .sbtn ul li {
padding-bottom:;zoom:1;clear:both;

}

.sa .sbtn ul li a {
padding-left:18px;font-size:12px;
margin-top:;line-height:30px;
text-decoration:none;color:#fff;
}

.sa .sbtn ul li .popmenu {
width:800px;height:500px;padding-left:32px;padding-right:30px;
background-color:#f5f5f5;margin-top:10px;
display:none;position:absolute;
}

.sa .sbtn ul li .popmenu dl {clear:both;overflow:auto;
color:#666;padding-top:15px;
padding-bottom:15px;height:500px;

}
.sa .sbtn ul li .popmenu dl a {border:0px solid;float:left;
line-height:42px;color:#666;
margin-left:0px;margin-right:0px;
}
.sa .sbtn ul li .popmenu dt {float:left;
width:70px;
}
.sa .sbtn ul li .popmenu dd {float:left;border:0px solid;
width:680px;margin-left:0px

}
#one { }

.sa .sbtn:hover ul{display:block}
.sa .sbtn ul li:hover{background-color:#f5f5f5;}
.sa .sbtn ul li:hover a{color:#666;}

#right-menu{display:none;width:800px;height:500px;
padding-left:32px;padding-right:30px;
background-color:#f5f5f5;margin-top:10px;
position:absolute;top:0px;left:200px;}

</style>
<script type="text/javascript" src="scripts/jquery-1.5.2.min.js">
window.onload=function(){

var oUl=document.getElementById('one');

var aLi=oUl.children;//获取第一级菜单的四个子标签

for (i=0;i<aLi.length;i++) {

aLi[i].onmouseover=function(){

this.children[0].style.display='block';

};

aLi[i].onmouseout=function(){

this.children[0].style.display='none';

};

}

};

</script>
</head>

<body>
<div class="sa">
<div class="sbtn" >
<div class="tnav"><h2><a href="#">商品目录</a></h2></div>
<ul>
<li id="one" class="s1" ><a href="#">女装</a>
<div class="" id="right-menu" >
<dl>
<dd>
<a href="#">针织衫</a>
<a href="#">T恤</a>
<a href="#">毛衣</a>
<a href="#">衬衫</a>
<a href="#">半身裙</a>
<a href="#">长裙</a>
<a href="#">短裙</a>
<a href="#">风衣</a>
<a href="#">卫衣</a>
<a href="#">短外套</a>
<a href="#">夹克</a>
<a href="#">裤子</a>
<a href="#">西装</a>
<a href="#">大码女装</a>
<a href="#">妈妈装</a>
<a href="#">旗袍</a>
<a href="#">唐装</a>
<a href="#">休闲裤</a>
<a href="#">阔脚裤</a>
<a href="#">牛仔裤</a>
<a href="#">短裤</a>
<a href="#">打底衫</a>
<a href="#">打底裤</a>
<a href="#">吊带</a>
<a href="#">内衣</a>
<a href="#">皮衣</a>
<a href="#">皮草</a>
<a href="#">礼服</a>
<a href="#">舞台装</a>
<a href="#">套装</a>
</dd>
</dl>
</div>
</li>
<li id="one" class="" >

<a href="#">男装</a>

<div class="" id="right-menu">
<dl>
<dd>
C
</dd>
</dl>
</div>
</li>
<li id="one" class=""><a href="#">男鞋</a>
<div class="" id="right-menu">
<dl>
<dd>
D
</dd>
</dl>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>

...全文

284 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

weixin_44007274 2018-12-11

打赏
举报

你看下你jq引用对了没

mikeflxca 2018-12-08

打赏
举报

引用 1 楼 weixin_44007274 的回复:

把你的代码稍微修改了下id属性最好是一个的如果是多个的属性最好是class <!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 charset="UTF-8"> <title>测试页面</title> <style> * {margin:0;padding:0;cursor:pointer;} a { font-family:Microsoft YaHei,Simsun; } .sa {float:left;margin-top:40px;margin-left:40px;position:relative;z-index:9999; width:200px;height:500px; } .sbtn { position:relative;z-index:99999; } .tnav {display:block;background-color:red;height:36px;} .sa .sbtn h2 { font-size:14px; } .sa .sbtn h2 a { line-height:36px;background-color:; padding-left:10px;width:180px;padding-right:10px; text-decoration:none; height:36px;color:#fff;weight:normal;display:block; } .sa .sbtn h2 a:hover { background-color:purple; } .sa .sbtn ul li.s1 {} .sa .sbtn ul { position:absolute;z-index:99999; width:200px;height:500px;top:36px;left:0px; list-style:none;display:none;padding-top:10px; background-color:#60a411; } .sa .sbtn ul li { padding-bottom:;zoom:1;clear:both; } .sa .sbtn ul li a { padding-left:18px;font-size:12px; margin-top:;line-height:30px; text-decoration:none;color:#fff; } .sa .sbtn ul li .popmenu { width:800px;height:500px;padding-left:32px;padding-right:30px; background-color:#f5f5f5;margin-top:10px; display:none;position:absolute; } .sa .sbtn ul li .popmenu dl {clear:both;overflow:auto; color:#666;padding-top:15px; padding-bottom:15px;height:500px; } .sa .sbtn ul li .popmenu dl a {border:0px solid;float:left; line-height:42px;color:#666; margin-left:0px;margin-right:0px; } .sa .sbtn ul li .popmenu dt {float:left; width:70px; } .sa .sbtn ul li .popmenu dd {float:left;border:0px solid; width:680px;margin-left:0px } #one { } .sa .sbtn:hover ul{display:block} .sa .sbtn ul li:hover{background-color:#f5f5f5;} .sa .sbtn ul li:hover a{color:#666;} #right-menu{display:none;width:800px;height:500px; padding-left:32px;padding-right:30px; background-color:#f5f5f5;margin-top:10px; position:absolute;top:0px;left:200px;} </style> <script type="text/javascript" src="scripts/jquery-1.5.2.min.js"> /* window.onload = function() { var oUl = document.getElementById('one'); var aLi = oUl.children; //获取第一级菜单的四个子标签 for (i = 0; i < aLi.length; i++) { aLi[i].onmouseover = function() { this.children[0].style.display = 'block'; }; aLi[i].onmouseout = function() { this.children[0].style.display = 'none'; }; } };*/ </script> </head> <body> <div class="sa"> <div class="sbtn"> <div class="tnav"> <h2><a href="#">商品目录</a></h2> </div> <ul> <li class="one s1" ><a href="#">女装</a> <div class="" id="right-menu"> <dl> <dd> <a href="#">针织衫</a> <a href="#">T恤</a> <a href="#">毛衣</a> <a href="#">衬衫</a> <a href="#">半身裙</a> <a href="#">长裙</a> <a href="#">短裙</a> <a href="#">风衣</a> <a href="#">卫衣</a> <a href="#">短外套</a> <a href="#">夹克</a> <a href="#">裤子</a> <a href="#">西装</a> <a href="#">大码女装</a> <a href="#">妈妈装</a> <a href="#">旗袍</a> <a href="#">唐装</a> <a href="#">休闲裤</a> <a href="#">阔脚裤</a> <a href="#">牛仔裤</a> <a href="#">短裤</a> <a href="#">打底衫</a> <a href="#">打底裤</a> <a href="#">吊带</a> <a href="#">内衣</a> <a href="#">皮衣</a> <a href="#">皮草</a> <a href="#">礼服</a> <a href="#">舞台装</a> <a href="#">套装</a> </dd> </dl> </div> </li> <li class="one"> <a href="#">男装</a> <div class="" id="right-menu"> <dl> <dd> C </dd> </dl> </div> </li> <li class="one"><a href="#">男鞋</a> <div class="" id="right-menu"> <dl> <dd> D </dd> </dl> </div> </li> </ul> </div> </div> <script> $(".one").hover(function(){ var _menu = $(this).children("#right-menu"); _menu.show(); },function(){ var _menu = $(this).children("#right-menu"); _menu.hide(); }) </script> </body> </html>

貌似不灵，右侧菜单还是打不开！

weixin_44007274 2018-12-07

打赏
举报

把你的代码稍微修改了下id属性最好是一个的如果是多个的属性最好是class <!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 charset="UTF-8"> <title>测试页面</title> <style> * {margin:0;padding:0;cursor:pointer;} a { font-family:Microsoft YaHei,Simsun; } .sa {float:left;margin-top:40px;margin-left:40px;position:relative;z-index:9999; width:200px;height:500px; } .sbtn { position:relative;z-index:99999; } .tnav {display:block;background-color:red;height:36px;} .sa .sbtn h2 { font-size:14px; } .sa .sbtn h2 a { line-height:36px;background-color:; padding-left:10px;width:180px;padding-right:10px; text-decoration:none; height:36px;color:#fff;weight:normal;display:block; } .sa .sbtn h2 a:hover { background-color:purple; } .sa .sbtn ul li.s1 {} .sa .sbtn ul { position:absolute;z-index:99999; width:200px;height:500px;top:36px;left:0px; list-style:none;display:none;padding-top:10px; background-color:#60a411; } .sa .sbtn ul li { padding-bottom:;zoom:1;clear:both; } .sa .sbtn ul li a { padding-left:18px;font-size:12px; margin-top:;line-height:30px; text-decoration:none;color:#fff; } .sa .sbtn ul li .popmenu { width:800px;height:500px;padding-left:32px;padding-right:30px; background-color:#f5f5f5;margin-top:10px; display:none;position:absolute; } .sa .sbtn ul li .popmenu dl {clear:both;overflow:auto; color:#666;padding-top:15px; padding-bottom:15px;height:500px; } .sa .sbtn ul li .popmenu dl a {border:0px solid;float:left; line-height:42px;color:#666; margin-left:0px;margin-right:0px; } .sa .sbtn ul li .popmenu dt {float:left; width:70px; } .sa .sbtn ul li .popmenu dd {float:left;border:0px solid; width:680px;margin-left:0px } #one { } .sa .sbtn:hover ul{display:block} .sa .sbtn ul li:hover{background-color:#f5f5f5;} .sa .sbtn ul li:hover a{color:#666;} #right-menu{display:none;width:800px;height:500px; padding-left:32px;padding-right:30px; background-color:#f5f5f5;margin-top:10px; position:absolute;top:0px;left:200px;} </style> <script type="text/javascript" src="scripts/jquery-1.5.2.min.js"> /* window.onload = function() { var oUl = document.getElementById('one'); var aLi = oUl.children; //获取第一级菜单的四个子标签 for (i = 0; i < aLi.length; i++) { aLi[i].onmouseover = function() { this.children[0].style.display = 'block'; }; aLi[i].onmouseout = function() { this.children[0].style.display = 'none'; }; } };*/ </script> </head> <body> <div class="sa"> <div class="sbtn"> <div class="tnav"> <h2><a href="#">商品目录</a></h2> </div> <ul> <li class="one s1" ><a href="#">女装</a> <div class="" id="right-menu"> <dl> <dd> <a href="#">针织衫</a> <a href="#">T恤</a> <a href="#">毛衣</a> <a href="#">衬衫</a> <a href="#">半身裙</a> <a href="#">长裙</a> <a href="#">短裙</a> <a href="#">风衣</a> <a href="#">卫衣</a> <a href="#">短外套</a> <a href="#">夹克</a> <a href="#">裤子</a> <a href="#">西装</a> <a href="#">大码女装</a> <a href="#">妈妈装</a> <a href="#">旗袍</a> <a href="#">唐装</a> <a href="#">休闲裤</a> <a href="#">阔脚裤</a> <a href="#">牛仔裤</a> <a href="#">短裤</a> <a href="#">打底衫</a> <a href="#">打底裤</a> <a href="#">吊带</a> <a href="#">内衣</a> <a href="#">皮衣</a> <a href="#">皮草</a> <a href="#">礼服</a> <a href="#">舞台装</a> <a href="#">套装</a> </dd> </dl> </div> </li> <li class="one"> <a href="#">男装</a> <div class="" id="right-menu"> <dl> <dd> C </dd> </dl> </div> </li> <li class="one"><a href="#">男鞋</a> <div class="" id="right-menu"> <dl> <dd> D </dd> </dl> </div> </li> </ul> </div> </div> <script> $(".one").hover(function(){ var _menu = $(this).children("#right-menu"); _menu.show(); },function(){ var _menu = $(this).children("#right-menu"); _menu.hide(); }) </script> </body> </html>