美文网首页Web前端之路让前端飞程序员
伪大神来个js二级菜单实现

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

作者: 菜花小噗噗 | 来源:发表于2017-04-05 15:08 被阅读130次

    之前好多人跟小编说,你有没有本事来个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一起来噶噶三湖,谈天说地

    相关文章

      网友评论

        本文标题:伪大神来个js二级菜单实现

        本文链接:https://www.haomeiwen.com/subject/wytxattx.html