課程
/前端開發
/HTML/CSS
/JS實現京東無延遲菜單效果
鼠標剛進入一級菜單還沒碰到家用電器的時候,二級菜單就出現了。這個時候二級菜單是空的,怎么消除這個BUG啊
2017-12-14
源自:JS實現京東無延遲菜單效果 4-2
正在回答
test ==== gt; test lt;br/gt; test一個絕對定位,一個是固定定位。。。fixed在ie6下不支持。。。。
$(document).ready(function?()?{ ???var?sub?=?$("#sub"); ???var?activeRow,?activeMenu; ???$("#test").on("mouseenter",function?(e)?{ ???????//?sub.removeClass("none"); ???}).on("mouseleave",function?(e)?{ ???????sub.addClass("none"); ???????if(activeRow){ ???????????activeRow.removeClass("active"); ???????????activeRow?=?null; ???????} ???????if(activeMenu){ ???????????activeMenu.addClass("none"); ???????????activeMenu?=?null; ???????} ???}).on("mouseenter","li",function?(e)?{ ???????sub.removeClass("none"); ???????if(!activeRow){ ???????????activeRow?=?$(e.target).addClass("active"); ???????????activeMenu?=?$("#"?+?activeRow.data('id')); ???????????activeMenu.removeClass("none"); ???????????return; ???????} ???????activeRow.removeClass("active"); ???????activeMenu.addClass('none'); ???????activeRow?=?$(e.target); ???????activeRow.addClass("active"); ???????activeMenu?=?$("#"?+?activeRow.data('id')); ???????activeMenu.removeClass("none"); ???}); });
這個其實也不算什么bug,你看到的空子菜單實際上就是它的padding造成的,你可以把padding這個css樣式命令剝離出來,在鼠標移入li時addClass,移出li時removeClass。第二種方法比較簡單,看圖:
把那行代碼寫過來
$("#text")包含內層的ul,還有li,,,進入ul還沒進入li時,也會觸發下面的.on("mouseenter",function(e){sub.removeClass("none")}),使得會出現#sub的樣式,這個bug看著很難受,直接寫成$("#text li")就行,讓他進入Li觸發,不過后面的事件委托的時候.on("mouseenter","li",function(e)前面就得加上$("#text")或者$("#text ul") 畢竟$("#text li")不能委托自己。小BUG完美解決。體驗感好些了。
這是我的解決方案https://github.com/keyiwu/JD-Menu/releases/tag/1.1.1
匹諾曹諾匹
還是不行,綁定li的話,離開一級菜單到二級菜單的時候,二級菜單會隱藏
我知道了,要綁定到li上
$('#test li')
舉報
JS模擬京東商城無延遲菜單效果,學習菜單結構和樣式處理
1 回答效果沒有實現
3 回答有個實際操作中出現的問題,不知道你們遇到沒有
4 回答請問,現在這個功能還有一個問題,想問一下怎么解決
3 回答誰有這個視頻里面的jquery.min.js和function.js這2個文件代碼,發一下
3 回答感覺JS這塊完全聽不懂了,全程一個分號都沒有,有點復雜
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2022-03-26
test ==== gt; test lt;br/gt; test一個絕對定位,一個是固定定位。。。fixed在ie6下不支持。。。。
2018-12-26
2018-12-26
這個其實也不算什么bug,你看到的空子菜單實際上就是它的padding造成的,你可以把padding這個css樣式命令剝離出來,在鼠標移入li時addClass,移出li時removeClass。第二種方法比較簡單,看圖:
把那行代碼寫過來
2018-07-31
$("#text")包含內層的ul,還有li,,,進入ul還沒進入li時,也會觸發下面的.on("mouseenter",function(e){
sub.removeClass("none")}),使得會出現#sub的樣式,這個bug看著很難受,直接寫成$("#text li")就行,讓他進入Li觸發,不過后面的事件委托的時候.on("mouseenter","li",function(e)前面就得加上$("#text")或者$("#text ul") 畢竟$("#text li")不能委托自己。小BUG完美解決。體驗感好些了。
2018-01-11
這是我的解決方案https://github.com/keyiwu/JD-Menu/releases/tag/1.1.1
2017-12-14
還是不行,綁定li的話,離開一級菜單到二級菜單的時候,二級菜單會隱藏
2017-12-14
我知道了,要綁定到li上
$('#test li')