【京东详情页】——原生js爬坑之二级菜单

【京东详情页】——原生js爬坑之二级菜单

一、引言

做京东详情页仿写的时候,要用原生js实现顶部菜单的二级菜单显示与隐藏事件的触发。

过程中遇到了一个坑,在这里与大家分享。要实现的效果如下:

   【京东详情页】——原生js爬坑之二级菜单_第1张图片【京东详情页】——原生js爬坑之二级菜单_第2张图片

 

二、坑

谁触发事件?显示、隐藏二级菜单      a?

 

如果绑给a

【京东详情页】——原生js爬坑之二级菜单_第3张图片

 

查找a   怎么查?

【京东详情页】——原生js爬坑之二级菜单_第4张图片

 

选择器  怎么写?

 【京东详情页】——原生js爬坑之二级菜单_第5张图片

调试  看是否找到全部a ,找到的是不是自己想要的a区域。

        

遍历a,添加事件

   【京东详情页】——原生js爬坑之二级菜单_第6张图片

 

用上了this,当“鼠标移入”a时,触发showSub事件。因为前面showSub已经定义好了,所以不用再写function了。此处,“鼠标移入”为事件一,添加事件监听事件一,触发事件二。事件二,即为shouSub显示事件。

 

三、坑的问题

当鼠标移出a区域时,已经触发了mouseout事件,二级菜单就会隐藏。用户无法停留在二级菜单继续操作。所以,以后这样的二级菜单事件不要绑定在a上。

 

四、解决方法

绑定事件在li上,因为a和a旁边的二级菜单都在li里边。 进入这两个区域,都属于mouseover。所以,以后像这种鼠标进入事件,就要绑定在父元素上。

 

改为绑定li之后:

 【京东详情页】——原生js爬坑之二级菜单_第7张图片  

      

五、留存问题

现在还是有一个小坑:在选择鼠标移入二级菜单之后,a的hover就不在了。

 【京东详情页】——原生js爬坑之二级菜单_第8张图片【京东详情页】——原生js爬坑之二级菜单_第9张图片 

 

解决方法:查找到li的第一个子元素a,为其加上className="hover"。

       【京东详情页】——原生js爬坑之二级菜单_第10张图片

 

注意一点:在css中“:hover”是伪类,是给浏览器看的,js不认。

 

解决方法:在“:hover”旁边,用逗号隔开一个一模一样样式的“.hover” 。                             

 


 注:转载请注明出处

 

                 

                

       

 

posted @ 2017-09-21 17:03 柳洁琼Elena 阅读( ...) 评论( ...) 编辑 收藏

你可能感兴趣的:(【京东详情页】——原生js爬坑之二级菜单)