侧条导航栏（仿京东）编码心得

标签：

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