码迷,mamicode.com
首页 > 其他好文 > 详细

侧条导航栏(仿京东)编码心得

时间:2016-08-22 19:52:49      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!