商城分类导航效果_技术笔记

little_frog 2019-05-29

出现问题：如何解决悬浮层的内容过少或者过多的问题：
1、内容过少时：
将左侧一级菜单与悬浮层的底部进行高度对比;
首先获取左侧一级菜单所处的高度(一级菜单li的索引*每个高度为30+标题部分的高度)：h0=[this.A-1]*30+42；
其次获取悬浮层的高度（当前活动DIV上部距离顶部的高度+本身DIV的高度）即：
h=this.getElementsByTagName('div')[0].style.top+this.getElementsByTagName('div')[0].offsetHeigth;
这里的this是指向Li标签的指针，
this.getElementsByTagName('div')[0]是获取Li标签下面的第一个div标签，
this.getElementsByTagName('div')[0].style.top是获取当前活动DIV上部距离顶部的高度。
判断语句：if(h<h0){this.getElementsByTagName('div').style.top=h0;}
当悬浮层的高度远远小于一级菜单标签所处的高度时，把一级菜单标签所处高度赋给悬浮层；
2、当内容过多时：
y=this.getElementsByTagName('div')[0].offsetHeigth;
if(y>550){
this.getElementsByTagName("div")[0].style.top="3px";
}

截图
0赞 · 0采集
慕粉2308425049 2018-07-19

this.i
top 位置

截图
0赞 · 0采集
半世烟云落 2018-04-08

0赞 · 0采集
白鹿max 2018-02-06

判断大类菜单高度距离的办法

截图
0赞 · 0采集
慕仙5237505 2017-11-04

啊啊啊

截图
0赞 · 0采集
慕仙5237505 2017-11-04

最终版

截图
0赞 · 0采集
慕仙5237505 2017-11-04

js 闭包中循环保存的是最后一个值

截图
0赞 · 0采集
慕仙5237505 2017-11-04

h0:一级菜单当前得到关标的那个离上面距离 y:悬浮层的自身高度， h:是obj.tyle.top(离顶部高度)+自身

截图
0赞 · 0采集
慕仙5237505 2017-11-04

判断是否分离：1分析

截图
0赞 · 0采集
慕仙5237505 2017-11-04

判断是否分离：2分析

截图
0赞 · 0采集
前端薇薇 2017-08-31

Lis[i].i=i; Lis[i].onmouseover = function () { this.className = "lihover"; //添加鼠标移入class var h0=(i-1)*30+42; //42为全部商品分类高度，ho为一级菜单高度 var y=this.getElementsByTagName("div")[0].offsetHeight;//获取悬浮框底边距离顶端的高度 var h=this.getElementsByTagName("div")[0].style.top+y;//获取悬浮框上边高度+y，等于悬浮框总高度 if(h<h0) //当悬浮层高度小于一级菜单高度， {this.getElementsByTagName("div")[0].style.top=h0+"px";} if(y>550){ this.getElementsByTagName("div")[0].style.top="3px"; } }

0赞 · 0采集
前端薇薇 2017-08-31

1、如何解决二级菜单内容过少导致和一级菜单分开的问题内容过少时：将左侧一级菜单的顶部与悬浮层的底部进行高度对比；首先获取左侧一级菜单所处的高度(一级菜单li的索引*每个高度为30+标题部分的高度)：h0=（this.i-1）*30+42；/*在显示的height=30px时，this.i-1是正确的。在height=60px时就有偏差*/ 其次获取悬浮层的高度（当前活动DIV上部距离顶部的高度+本身DIV的高度）即：h=this.getElementsByTagName('div')[0].style.top+this.getElementsByTagName('div')[0].offsetHeigth; 判断语句：if(h<h0){this.getElementsByTagName('div')[0].style.top=h0+'px';} 2、如何解决二级菜单内容过多导致在当前窗口显示不全的问题内容过多时：if(this.getElementsByTagNmae('div')[0].offsetHeigth>550) 550是浏览器窗口除去浏览器的标签栏、地址栏、收藏栏等的大概可用高度将二级菜单top属性设置小一些 {this.getElementsByTagName('div')[0].style.top='3px'} 注意：height是像素值，offsetHeight是数字值。所以用offsetHeight。如果在for循环下直接使用i是不会产生闭包的。由于是在function()函数体中使用i所以产生了闭包，这个函数里面根本没有i这个变量，所以函数会从父级函数中去找i，当找到这个i的时候，for循环已经循环完毕了，所以最终会返回i的最后一个值；要获取正确的i值，可以将i值绑定在调用函数的对象上，然后在函数内部使用this.i来获取。

0赞 · 0采集
riyyao 2017-07-05

Lis[i].i=i; Lis[i].onmouseover = function () { this.className = "lihover"; //添加鼠标移入class var h0=(i-1)*30+42; //42为全部商品分类高度，ho为一级菜单高度 var y=this.getElementsByTagName("div")[0].offsetHeight;//获取悬浮框底边距离顶端的高度 var h=this.getElementsByTagName("div")[0].style.top+y;//获取悬浮框上边高度+y，等于悬浮框总高度 if(h<h0) //当悬浮层高度小于一级菜单高度， {this.getElementsByTagName("div")[0].style.top=h0+"px";} if(y>550){ this.getElementsByTagName("div")[0].style.top="3px"; } }

截图
0赞 · 0采集
yelllowsky 2017-06-24

console.log()控制台显示内容

0赞 · 0采集
magic_4 2017-05-20

heiha

截图
0赞 · 0采集
雨落尘中碎_03948239 2017-04-13

代码截图防止函数闭包的概念得到的是最后一个i的值

截图
0赞 · 0采集
秦虢 2017-03-30

主要是闭包的理解与运用，原来局部变量是不能每次都保存的，里面的i也是每次执行到最后返回给的i，但是每次都要用到当前的i，所以要定义保存这个变量值。大致理解

0赞 · 0采集
yo_yo_yo 2017-03-27

闭包，for循环每次i的变化都改变了h0的值，但是for循环结束,i是最后那个i=lis.length-1的位置，所以h0永远都是最下面那个高度，需要给每个位置都定义一个i，这样就能保存i的值。最后那个，如果y的值超过用户可视的高度550px,就把悬浮层往上移

0赞 · 0采集
慕UI6939182 2017-02-27

var h0=(i-1)*30+42; var y=this.getElementsByTagName("div")[0].offsetHeight; var h=this.getElementsByTagName("div")[0].style.top; if(h<h0) {this.getElementByTagName("div")[0].style.top=h0+"px";} if(y>550){this.getElementByTagName("div")[0].style.top="3px";} }

0赞 · 0采集
Close_0 2017-02-21

对一级菜单和悬浮层的高度作比较，以判断两者是否分离

截图
0赞 · 0采集
慕数据0204790 2017-01-12

1、如何解决二级菜单内容过少导致和一级菜单分开的问题内容过少时：将左侧一级菜单的顶部与悬浮层的底部进行高度对比；首先获取左侧一级菜单所处的高度(一级菜单li的索引*每个高度为30+标题部分的高度)：h0=（this.i-1）*30+42；/*在显示的height=30px时，this.i-1是正确的。在height=60px时就有偏差*/ 其次获取悬浮层的高度（当前活动DIV上部距离顶部的高度+本身DIV的高度）即：h=this.getElementsByTagName('div')[0].style.top+this.getElementsByTagName('div')[0].offsetHeigth; 判断语句：if(h<h0){this.getElementsByTagName('div')[0].style.top=h0+'px';} 2、如何解决二级菜单内容过多导致在当前窗口显示不全的问题内容过多时：if(this.getElementsByTagNmae('div')[0].offsetHeigth>550) 550是浏览器窗口除去浏览器的标签栏、地址栏、收藏栏等的大概可用高度将二级菜单top属性设置小一些 {this.getElementsByTagName('div')[0].style.top='3px'} 注意：height是像素值，offsetHeight是数字值。所以用offsetHeight。如果在for循环下直接使用i是不会产生闭包的。由于是在function()函数体中使用i所以产生了闭包，这个函数里面根本没有i这个变量，所以函数会从父级函数中去找i，当找到这个i的时候，for循环已经循环完毕了，所以最终会返回i的最后一个值；要获取正确的i值，可以将i值绑定在调用函数的对象上，然后在函数内部使用this.i来获取。

2赞 · 2采集
DCraig 2017-01-05

二级菜单内容过少导致和一级菜单分开的问题：左侧对应一级菜单的顶部和悬浮的底部进行高度对比步骤如下：先获取一级菜单所处的高度赋值给一个变量其次获取悬浮层的高度利用判断语句if来进行选择解决二级菜单内容过多导致显示不全的问题：先判断二级菜单的高度是否大于可用高度大于则将二级菜单的top设置的小一点

0赞 · 0采集
海的那边是海 2016-12-14

循环里面,i变量的值只保存最后一个值.所以就要在每一次的循环中保存当前次的i值.

截图
0赞 · 0采集
Arfive123 2016-11-29

在循环时，i存储的是最后一次循环时的值

0赞 · 0采集
朝夕ing 2016-11-06

右拉菜单的上下问题

截图
0赞 · 0采集
YeungSyuNie 2016-10-26

如何解决内容过少或者过多的问题： 1、内容过少时：将左侧一级菜单与悬浮层的底部进行高度对比； 首先获取左侧一级菜单所处的高度(一级菜单li的索引*每个高度为30+标题部分的高度)：h0=[this.i-1]*30+42； 2.获取悬浮层的高度（当前活动DIV上部距离顶部的高度+本身DIV的高度）即：h=this.getElementsByTagName('div')[0].offsetTop+this.getElementsByTagName('div')[0].offsetHeigth; 判断语句：if(h<h0){this.getElementsByTagName('div').style.top=h0;} 内容过多时：if(this.getElementsByTagNmae('div')[0].offsetHeigth>550){this.getElementsByTagName('div')[0].style.top=0+3+'px'} 使用闭包的注意点 1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。 2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

0赞 · 0采集
Sharon126 2016-10-16

1、如何解决二级菜单内容过少导致和一级菜单分开的问题内容过少时：将左侧一级菜单的顶部与悬浮层的底部进行高度对比；首先获取左侧一级菜单所处的高度(一级菜单li的索引*每个高度为30+标题部分的高度)：h0=（this.i-1）*30+42；/*在显示的height=30px时，this.i-1是正确的。在height=60px时就有偏差*/ 其次获取悬浮层的高度（当前活动DIV上部距离顶部的高度+本身DIV的高度）即：h=this.getElementsByTagName('div')[0].style.top+this.getElementsByTagName('div')[0].offsetHeigth; 判断语句：if(h<h0){this.getElementsByTagName('div')[0].style.top=h0+'px';} 2、如何解决二级菜单内容过多导致在当前窗口显示不全的问题内容过多时：if(this.getElementsByTagNmae('div')[0].offsetHeigth>550) 550是浏览器窗口除去浏览器的标签栏、地址栏、收藏栏等的大概可用高度将二级菜单top属性设置小一些 {this.getElementsByTagName('div')[0].style.top='3px'} 注意：height是像素值，offsetHeight是数字值。所以用offsetHeight。如果在for循环下直接使用i是不会产生闭包的。由于是在function()函数体中使用i所以产生了闭包，这个函数里面根本没有i这个变量，所以函数会从父级函数中去找i，当找到这个i的时候，for循环已经循环完毕了，所以最终会返回i的最后一个值；要获取正确的i值，可以将i值绑定在调用函数的对象上，然后在函数内部使用this.i来获取。

0赞 · 0采集
BeingTowards 2016-10-05

1、如何解决二级菜单内容过少导致和一级菜单分开的问题内容过少时：将左侧一级菜单的顶部与悬浮层的底部进行高度对比；首先获取左侧一级菜单所处的高度(一级菜单li的索引*每个高度为30+标题部分的高度)：h0=[this.i]*30+42；其次获取悬浮层的高度（当前活动DIV上部距离顶部的高度+本身DIV的高度）即：h=this.getElementsByTagName('div')[0].offsetTop+this.getElementsByTagName('div')[0].offsetHeigth; 判断语句：if(h<h0){this.getElementsByTagName('div').style.top=h0;} 2、如何解决二级菜单内容过多导致在当前窗口显示不全的问题内容过多时：if(this.getElementsByTagNmae('div')[0].offsetHeigth>550) 550是浏览器窗口除去浏览器的标签栏、地址栏、收藏栏等的大概可用高度将二级菜单top属性设置小一些 {this.getElementsByTagName('div')[0].style.top=0+3+'px'} 注意：height是像素值，offsetHeight是数字值。所以用offsetHeight。如果在for循环下直接使用i是不会产生闭包的。由于是在function()函数体中使用i所以产生了闭包，这个函数里面根本没有i这个变量，所以函数会从父级函数中去找i，当找到这个i的时候，for循环已经循环完毕了，所以最终会返回i的最后一个值；要获取正确的i值，可以将i值绑定在调用函数的对象上，然后在函数内部使用this.i来获取。

截图
0赞 · 0采集
jazia 2016-09-24

如何解决内容过少或者过多的问题： 1、内容过少时：将左侧一级菜单与悬浮层的底部进行高度对比；首先获取左侧一级菜单所处的高度(一级菜单li的索引*每个高度为30+标题部分的高度)：h0=[this.i]*30+42；其次获取悬浮层的高度（当前活动DIV上部距离顶部的高度+本身DIV的高度）即：h=this.getElementsByTagName('div')[0].offsetTop+this.getElementsByTagName('div')[0].offsetHeigth; 判断语句：if(h<h0){this.getElementsByTagName('div').style.top=h0;} 内容过多时：if(this.getElementsByTagNmae('div')[0].offsetHeigth>550){this.getElementsByTagName('div')[0].style.top=0+3+'px'} 注意：height是像素值，offsetHeight是数字值。所以用offsetHeight。函数的闭包，函数里面拿不到函数外的变量，可以通过赋值给this或者新变量的方式让函数里面能访问，尤其是循环绑定事件时去this的索引，可以讲索引赋值给函数调用者

0赞 · 0采集
慕工程2957023 2016-09-19

用到了JS的闭包（1）lis[i].i 把第i各li增加个属性“i”，把当前的i赋值给属性“i” （2）在onmouseover 调用this.i，也就是当前li里面的属性“i”的值（3）onmouseover为外部函数，调用了li的属性“i”，而属性“i”在内部函数for循环里被定义赋值，这样形成里JS闭包，所以属性“i”不会被回收机制回收如何解决悬浮层因内容太少而导致鼠标无法移入的问题。解决思路：通过当前一级分类的底部距离顶部的高度h0和悬浮层底部距离顶部的高度h相比较，如h0>h则将悬浮层的位置往下移动至h0（一级菜单底部）处。 offsetHeight:获取可视区域的高度（实际看得到的那个高度，不包括滚动条的高度）。

0赞 · 0采集

数据加载中...