伪大神来个js二级菜单实现

之前好多人跟小编说,你有没有本事来个js源码,别动不动就搞插件,jquery的,那么简单,傻子都会。

插件怎么了,jquery怎么了?! 老子特么就一渣渣,就喜欢投机取巧。哈哈哈,有本事来咬我呀

好吧,源码啥的离我太遥远了,我还不想谢顶猝死,小女子逻辑思维太差,就只会点简单的。

之前小编用jquery写了个炒鸡简单的二级菜单的实现http://www.toutiao.com/i6403220130708324865/,今儿咱改革改革,让那些瞧不起姐姐的开开眼,就用js来写个二级菜单,╭(╯^╰)╮ 怕你哦(不过确实怕,胆子小⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄)

先上效果图:

再上代码图:

html结构

第一步

第二步

其实js上大致分为两步走,也就是鼠标移上显示及离开隐藏。

用了onmouseover和onmouseout两个方法,先选取到一级菜单,这里我为了区分标签,一级用li,二级用了dl dt。当然结构上你也可以都用li,或者直接dl dt dd。反正两个盒子要知道自己写的是什么

然后选取到以后就是一个个的去遍历过去也就是遍历下标,下标从0开始,当鼠标移上,dl的display属性变block也就是相当于jquery的show啦,反正就是none

其实也不算太难,但是呢,费脑子

宝宝表示还是喜欢用jquery来。

好吧其实你想用啥就用啥呗,反正效果出来就好。老板只求结果,才不管过程呢,反正他也看不懂,哈哈哈

反正不管咋地,欢迎婊婊们加群142991222一起来噶噶三湖,谈天说地

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容