這段js是不是有問題？有漏洞哎
給subNav的樣式中添加一個border，你會很清楚的發(fā)現(xiàn)這段代碼的問題。好像清除不了定時器。鼠標(biāo)在展開的二級菜單上來回的上下晃，二級菜單的高度就會不聽得增加。不知道有沒有人發(fā)現(xiàn)這個問題？具體怎么解決？
xing_org1
2016-09-19
4 回答
舉報
0/150
提交
取消
2016-09-19
課程水平伸縮菜單制作中是這么設(shè)置的，這個練習(xí)題中CSS里面的設(shè)置和水平伸縮菜單模塊的CSS樣式設(shè)定不一樣的，不能直接套用課程的代碼，我這邊運行是顯示不出來二級菜單的，<ul class="subNav">大小仍為120*0，高度值為0；題目CSS中設(shè)置了.subNav{ position:absolute; top:30px; left:0; width:120px; height:0; overflow:hidden}，高度為0，overflow:hidden，我也是新手一枚，說的不對還請見諒，實現(xiàn)要求的效果可以這樣寫，請參考：
<script>
window.onload=function(){
? ? var aLi=document.getElementsByTagName('li');
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover=function(){
? ? ? ? ? ? //鼠標(biāo)經(jīng)過一級菜單，二級菜單動畫下拉顯示出來
this.getElementsByTagName("ul")[0].style.overflow="visible"；
}? ? ?/*此處可以用上你的判斷語句，var This=this.getElementsByTagName("ul")[0];
? ? if(This)??This.style.overflow="visible"; ? 個人覺得此步驟可以不用，aLi[2]、aLi[3]、aLi[4]?沒有ul子節(jié)點，for循環(huán)正常循環(huán)就可以 */
?//鼠標(biāo)離開菜單，二級菜單動畫收縮起來。
aLi[i].onmouseout=function(){
? ? ? ? ? ? ? ? this.getElementsByTagName("ul")[0].style.overflow="hidden";?
}
}
}
</script>
2016-09-20
昨天重新認(rèn)真的把代碼寫了一遍，試了你說的這種方法，如果if(sub.offsetHeight > 120) clearInterval(sub.timer)，確實會出現(xiàn)你說的這些個問題，在二級菜單上面晃來晃去的，onmouseover不斷觸發(fā)，高度會不斷增加，onmuouseover事件有冒泡行為，子節(jié)點li鼠標(biāo)移動事件引發(fā)父節(jié)點ul行為，增加sub.style.height ="120px"限定高度消除子節(jié)點引起動畫事件，當(dāng)然動畫效果會生硬，或者也可以用onmouseenter和onmouseleave，網(wǎng)上還有其他方法解決onmouseover冒泡行為，后面Jquery也會講解一些；此外針對用overflow屬性做法，個人理解是這樣的，CSS父模塊ul height=0,overflow=hidden,設(shè)置overflow=visible，雖然height=0，但是里面內(nèi)容li高度不為0，利用overflow溢出顯示出二級菜單，不知道這種是不是很取巧；此外也可以設(shè)置邊框觀察下鼠標(biāo)移走時的現(xiàn)象，試下sub.style.height = sub.offsetHeight +/- 120+ "px"的效果，試著將border加粗加細(xì)的效果，拙見哈哈
2016-09-19
研究好了，解決方法如下：
首先是對源代碼的研究：
window.onload = function() {
var aLi = document.getElementsByClassName('li');
// alert(aLi.length);
for(var i = 0; i < aLi.length; i++) {
aLi[i].onmouseover = function() {
//鼠標(biāo)經(jīng)過一級菜單，二級菜單動畫下拉顯示出來
var sub = this.getElementsByClassName('subNav')[0];
if(sub) {//如果這個li當(dāng)前是有sub的，即sub==true，執(zhí)行如下代碼：
// var This = sub;這里其實可以刪除不用this的。
clearInterval(sub.timer);
sub.timer = setInterval(function() {
//我插入了三個alert進(jìn)行調(diào)試：
//alert('+20');//彈出+20，以判斷在這里執(zhí)行了，幾次+20.經(jīng)判斷，他是執(zhí)行了6次，即加到了120，在120的時候，因為if判斷，執(zhí)行了clear
sub.style.height = sub.offsetHeight + 20 + "px";
if(sub.offsetHeight > 120) {
sub.style.height = 120+'px';
clearInterval(sub.timer)
//alert('跳出來了');//clear執(zhí)行后，跳出本次循環(huán)
}
}, 30)
//alert(sub);//本來以為放在這里彈窗。會在加完120后再執(zhí)行，沒想到他先執(zhí)行的這個，并且彈出ullistElement，即說明他找到了subNav的ul，
//最終找到原因和解決方法：
????????問題來了，當(dāng)加載完成后，請你嘗試把鼠標(biāo)再放到二級菜單上移動一下，你沒選擇一個二級菜單，他就是把這三個alert再執(zhí)行一遍，然后你就會看到ul的長度又加了20，當(dāng)你不停的上下晃動鼠標(biāo)，二級菜單就會不停的添加。最后加的老長。為了明顯，我加了border，效果一目了然。
????????原因：這里，通過這個代碼：alert(aLi.length);原因就明顯了，因為開頭的aLi，獲得的是body中所有的li，包括二級菜單的。就是說你在二級菜單的每一個li上晃一下，他都會認(rèn)為你是在重新執(zhí)行了aLi.onmouseover這個代碼，流程就再走了一遍。但是因為在高度加20那里，他高度先增加了20，然后一判斷，發(fā)現(xiàn)高度大于120了，就趕緊跳出了。所以就會每次你晃一下，只增加了20。
????????解決1，從源頭，只找對應(yīng)的li，試過以后，我還沒發(fā)現(xiàn)真諦。難道是要給ul一個id，然后通過id獲得ul下的li集合，再判斷誰有二級菜單進(jìn)行顯示
????????解決2：高度處，在判斷那里，如果高度大于120了，我們就直接讓高度等于120，不就得了，以后他再長，也會被這一條限制住。sub.style.height = 120+'px';
? ? ? ?解決3：判斷處，再增加前我先判斷是不是大于120行不行，是的話你就停止，不是就繼續(xù)。問題也就可以解決了。代碼如下：
if(This.offsetHeight >= 120){
clearInterval(This.timer)；
}else{
This.style.height = This.offsetHeight + 20 + "px";
}
//最后mouseout那里，就不用管了，畢竟ul的長度不會出格了，就不需要加強防備了、
}
}
2016-09-19
建議代碼貼出來，說清楚問題，這樣大家好分析