老师 我这里不太明白 看不懂这段代码

老师 我这里不太明白 看不懂这段代码

http://img1.sycdn.imooc.com//climg/5e083b1f092c310117420447.jpg

123

http://img1.sycdn.imooc.com//climg/5e083b08096d05bd15860554.jpg

312

http://img1.sycdn.imooc.com//climg/5e083b4c09234b1c24870699.jpg


不太明白这句 代码  

<div class="menu dropdown fl" data-active="menu">    

activeClass = $elem.data('active') + '-active';  

为什么这样写 就能实现hover显示隐藏下拉菜单 

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,关于同学的问题解答如下:

1、data-是用来自定义属性的,data-可以为元素自定义属性,然后通过data()来获取。例:

http://img1.sycdn.imooc.com//climg/5e0851eb09e2e20508460239.jpg

控制台可以获取自定义属性值:

http://img1.sycdn.imooc.com//climg/5e0851fc0969ded202470056.jpg

2、那么这句代码:

<div class="menu dropdown fl" data-active="menu">

它就是为div标签绑定了一个自定义属性active,属性值是menu。

下面这句代码:

activeClass = $elem.data('active') + '-active';

就是实现hover效果的类名,获取div的自定义属性值为menu再拼接上-active,得到的就是menu-active,当鼠标移上的时候,把这个hover样式添加上去,就实现了效果:

http://img1.sycdn.imooc.com//climg/5e0853180945657205070178.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 琥珀_2020 提问者 #1
    好的 谢谢老师 我还有一个问题也帮我解决一下呢 那个 没有淡入淡出效果 的问题
    2019-12-29 15:25:16
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
微信客服

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

帮助反馈 APP下载

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

公众号

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

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师