免费注册 查看新帖 |

ChinaUnix.net

  平台 论坛 博客 文库 频道自动化运维 虚拟化 储存备份 C/C++ PHP MySQL 嵌入式 Linux系统
最近访问板块 发新帖
查看: 1460 | 回复: 2

[JavaScript] 悬停主菜单tab,右侧悬浮子菜单不显示是什么原因?求帮助! [复制链接]

论坛徽章:
0
发表于 2018-12-06 11:11 |显示全部楼层

悬停“商品目录”时,其下方的左侧菜单显示、预期右侧的悬浮子菜单也会同时显示(在尚未hover左侧菜单情况下);而且当悬停左侧菜单项时,预期右侧悬子浮菜单也会对应轮动显示。但是运行后右侧子菜单未能显示,进一步悬停左侧菜单时,右侧菜单也未相应轮动显示。
javascript写的哪里有错吗?谁能给改一下或给个提示(最好直接先给改下,因为对Javascript不熟)?
下图显示:悬停"商品目录“时,左侧菜单显示了,但右侧是空的:

代码如下:

<!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">
window.onload=function(){


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


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


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


aLi.onmouseover=function(){


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

};


aLi.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>


bug-a.png

论坛徽章:
0
发表于 2018-12-06 11:33 |显示全部楼层
说错了,首先应该实现:鼠标悬停“商品目录”时出现左侧菜单(位于其下方),这个实现了。然后鼠标继续悬停于左侧菜单项时,右侧显示其对应的悬浮子菜单,移动左侧悬浮位置(左侧菜单项目)时,右侧子菜单交替显现。

论坛徽章:
0
发表于 2018-12-06 14:12 |显示全部楼层
忘了说了:

还需要实现:
鼠标移开左、右侧后,整个菜单画面除了“商品目录”之外,全部消失!
也就是说右侧子菜单也消失。
当前,左侧菜单是通过css实现了鼠标移开后消失的。
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

数据风云,十年变迁
DTCC 第十届中国数据库技术大会已启航!

2019年5月8日~5月10日,由IT168旗下ITPUB企业社区平台主办的第十届中国数据库技术大会(DTCC2019),将在北京隆重召开。大会将邀请百余位行业专家,就热点技术话题进行分享,是广大数据领域从业人士的又一次年度盛会和交流平台。与SACC2018类似,本届大会将采用“3+2”模式:3天传统技术演讲+2天深度主题培训。大会不仅提供超100场的主题演讲,还会提供连续2天的深度课程培训,深化数据领域的项目落地实践方案。
DTCC2019,一场值得期待的数据技术盛会,殷切地希望您报名参与!

活动入口>>
  

北京盛拓优讯信息技术有限公司. 版权所有 16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122
中国互联网协会会员  联系我们:huangweiwei@it168.com
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP