为了账号安全,请及时绑定邮箱和手机立即绑定

JS实现京东无延迟菜单效果

呵呵SN JS工程师
难度初级
时长48分
学习人数
综合评分9.33
85人评价 查看评价
9.7 内容实用
9.2 简洁易懂
9.1 逻辑清晰

最赞回答 / qq_有人我_7
以上仅为个人观点,如有错误请指正

最赞回答 / 小媛快跑
源码+文字整理: https://segmentfault.com/a/1190000012633588?_ea=3087816

最赞回答 / 浅芷初夏
这个其实也不算什么bug,你看到的空子菜单实际上就是它的padding造成的,你可以把padding这个css样式命令剥离出来,在鼠标移入li时addClass,移出li时removeClass。第二种方法比较简单,看图:<...图片...>把那行代码写过来

最赞回答 / 兼容并包
这个的正确写法是 li:ative{ //这里写你要用的样式代码} 。 我写这么多海没见过你发的那个伪类。希望对你有帮助。

最新回答 / 慕粉1736476467
可不可以分区域,当鼠标在左侧部分,就不需要延迟加载,当鼠标在右侧,就可以延迟加载。

最新回答 / 懵逼的我
https://github.com/ccccccl/JD-has-no-delayed-menu  代码不完全一样,根据理解实现了功能。欢迎点赞。

最赞回答 / Avalondada
第五行$("#test ul")这里出问题了,将事件绑在ul上就会出现这个问题,应该绑在整个的父元素上,也就是id="test"这个div上。

最新回答 / simonc
代码里面的active样式应该是这样的:li.active{    background: ....;}当鼠标移动到li项的时候背景颜色会发生改变至于activeRow和activeMenu,它们都是全局变量请使用手机"扫一扫"x

最新回答 / MarlboroKay
ul{padding: 15px 0;margin:9px;list-style:none;background:#6c6669;color:#ffffff;border-right-width: 10px;top:0;}top:0;去掉望采纳!

最新回答 / 0MY0
自问自答。。。。原来jquery.min.js要放在前面。。。。<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/megadropdown.js"></script>
课程须知
1、基本的HTML,CSS和JS语法 2、JQuery的常用API
老师告诉你能学到什么?
1、如何写菜单结构 2、如何写菜单样式 3、如何实现菜单交互 4、如何优化菜单交互 5、如何实现无延迟切换

微信扫码,参与3人拼团

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消