标签:
1:一级菜单用ul li标签实现,二级菜单可以用dl dt dd实现,在这个例子中,为了方便,直接使用div
2:一级菜单的箭头符号,可以用bootstarp实现,然后利用hover属性,将一个方块覆盖上去,实现隐藏功能
3:然后需要用循环,批量为对象绑定执行函数的执行函数体,所处理的功能也一般为批量功能,然后此时的 i 就起到了一个对象对应一个执行函数的作用。起初用的如下写法
for (var i = 0; i < liNum.length; i++) {
liNum[i].onmouseover = function(){
alert(i);
classNum[i].style.visibility = "visible";
}
}
alert(i)的值始终是 liNum.length的值,原因是onmouseover函数只有在onmouseover移动过去的时候会执行,也就是说,for循环之后,当你想要移动触发自己想要的执行函数时, 此时js编译器开始找到对应的函数体(具体为找到这行代码:classNum[i].style.visibility = "visible";其执行环境变为
function(){
classNum[i].style.visibility = "visible";
//这里的i是函数内部参数,不能访问以外的局部变量,此时js在当前执行环境中找不到i的值,
//便往上一层查找,此时便找到了已经循环结束之后的i值,此时的i值已经成为了7,所以执行会报错
};
为了能让 i 值顺利传入,解决的方案就是引入闭包函数,如下:
for (var i = 0; i < liNum.length; i++) {
(function (i) {
liNum[i].onmouseover = function () {
classNum[i].style.visibility = "visible";
};
liNum[i].onmouseout = function () {
classNum[i].style.visibility = "hidden";
};
})(i);
}
4:关于二级菜单,如何正确显示是个大问题,解决办法就是定义相同的div,选择器类名也相同,这些选择器被同一个div包裹,外层div控制整体位置,里面的div通过position定位显示在一起并且被覆盖,最初都设置为不可见,通过js函数控制当鼠标移动过去,i值传入,再修改需要更改的属性。
#content{
width: 790px;
height: 250px;
float: left;
position: relative;
}
.content_1{
width: 790px;
height: 250px;
background-color: #f7f7f7;
float: left;
border:1px solid #B1191A;
border-top: 0;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
标签:
原文地址:http://www.cnblogs.com/jiang-han/p/5796568.html