js下拉菜单怎么做求大神

 我来答

1个回答

#热议# 为什么有人显老，有人显年轻？

淡泊明志1Eh
2017-08-30

知道答主

回答量：3

采纳率：0%

帮助的人：5.5万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style type="text/css">

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

.all{ width:330px; height:30px; background:url(img/bg.jpg) no-repeat; margin:100px auto; line-height:30px; text-align:center; padding-left:10px; margin-bottom:0;}

.all ul li{ width:100px; height:30px; background:url(img/libg.jpg); float:left; margin-right:10px; position:relative; cursor:pointer;}

.all ul ul{ position:absolute; left:0; top:30px; display:none;}

</style>

</head>

<body>

<div class="all" id="list">

<ul>

<li>一级菜单

<ul>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ul>

</li>

<li>一级菜单

<ul>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ul>

</li>

<li>一级菜单

<ul>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ul>

</li>

</ul>

</div>

</body>

</html>

<script>

// 获取对象遍历对象操作显示模块隐藏模块

function List(id) { // 获取对象

this.id = document.getElementById(id); // 取 id 值

this.lis = this.id.children[0].children; // 获取一级菜单所有的li

}

// init 初始化

List.prototype.init = function() { // 遍历所有的li 显示和隐藏

var that = this;

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

{

this.lis[i].index = i;

this.lis[i].onmouseover = function() {

that.show(this.children[0]); // 显示出来

}

this.lis[i].onmouseout = function() {

that.hide(this.children[0]); // 隐藏起来

}

}

}

// 显示模块

List.prototype.show = function(obj) {

obj.style.display = "block";

}

// 隐藏模块

List.prototype.hide = function(obj) {

obj.style.display = "none";

}

var list = new List("list"); // 实例化了一个对象叫 list

list.init();

</script>

本回答由提问者推荐

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

js下拉菜单怎么做 求大神

其他类似问题

为你推荐：

js下拉菜单怎么做求大神