怎么封装下面的下拉菜单代码呢？-慕课网

首页课程实战体系课手记专栏慕课教程

怎么封装下面的下拉菜单代码呢？

来源：-

七月小麦麦

2015-06-16 21:33

<!DOCTYPE html>

<html>

<head>

<title>鼠标点击事件</title>

*{margin:0;padding:0;list-style:none;text-decoration:none;}

.head{background:#FFF;width: 100%;position: fixed;border:1px solid rgb(230,230,230);border-top:3px solid rgb(255,133,0);}

.head_content{width:1000px;height:40px;margin:0 auto;}

.head_content .left ul li{float: left;line-height: 40px;width: 100px;text-align: center;}

.head_content .left ul li a,.head_content .right ul li a{color:#bebcbc;}

.head_content .right ul li{float: right;line-height: 40px;width: 70px;text-align: center;}

.head_content .left{height: 100%;float: left;width: 400px}

.head_content .left ul li ul,.head_content .right ul li ul{display:none;overflow:hidden;background:#FFF;border:1px solid #FF8600;border-top:1px solid #FFF;}

.head_content .left ul li ul li,.head_content .right ul li ul li{border-bottom:1px solid #FF8600;height:25px;line-height:25px;}

.head_content .right{height: 100%;float: right;width: 440px;}

.head_content .left ul li a:hover,.head_content .right ul li a:hover{color: #ff8600;display: block;background: #EFEFF7;}

.head_content .right .close{background:url(images/close.png) no-repeat 10%;height: 20px;line-height: 20px;border:1px solid #E7E7EF;float: right;width:48px;text-indent:20px;margin:8px 20px;}

</style>

</head>

<body>

<div>

<li><a href="">我的菜单

<ul>

</ul>

</li>

<li><a href="">手机新浪网</a></li>

<li><a href="">移动客户端

<ul>

</ul>

</li>

</ul>

</div>

<div>

<ul>

<li><a href="">VIP邮箱</a></li>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

</div>

</div>

// 左边导航下拉菜单

var ul=document.getElementById("menu1")

var lis=ul.getElementsByTagName("li")

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

lis[i].onmouseover=function () {

var oUl=this.getElementsByTagName("ul")[0];

oUl.style.display="block";

}

lis[i].onmouseout=function () {

var oUl=this.getElementsByTagName("ul")[0];

oUl.style.display="none";

}

// 右边导航下拉菜单

var ul=document.getElementById("menu2")

var lis=ul.getElementsByTagName("li")

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

lis[i].onmouseover=function () {

var oUl=this.getElementsByTagName("ul")[0];

oUl.style.display="block";

}

lis[i].onmouseout=function () {

var oUl=this.getElementsByTagName("ul")[0];

oUl.style.display="none";

}

</script>

</body>

</html>

写回答关注

0回答

还没有人回答问题，可以看看其他问题

DOM事件探秘

DOM事件？本课程会通过实例来给小伙伴们讲解如何使用这些事件

99545 学习 · 1197 问题

查看课程

相似问题

下拉菜单倒三角

回答 1

关于仿下拉菜单取元素标签问题

回答 1

为什么下拉菜单出来后一按上下键盘就会自己收回去

回答 2

问一下下面代码

回答 2

[源码bug]不打开下拉菜单时键盘事件仍然有效,如何消除这个?

回答 1

打开慕课网App查看更多内容