jQuery实现鼠标移入时显示列表移出时隐藏列表

jQuery实现鼠标移入时显示列表移出时隐藏列表

鼠标移出的时候隐藏列表

鼠标移入的时候显示列表

前端页面的静态代码块此处只写主要代码

 

          
          
             客户服务
          
          

            
帮助中心
            
售后服务
            
在线客服
            
投诉中心
            
客服邮箱
          
  

js的代码实现

/*
1.对哪个元素进行绑定什么舰艇？
2.对哪个元素进行什么DOM操作
 */
$(function () {
    showhide()
    /*
    鼠标移入显示，移出隐藏
     */
    function showhide () {
        
        $('[name=show_hide]').hover(function () {//显示
            var id = this.id + '_items'
            $('#' + id).show()
        },function () {//隐藏
            var id = this.id + '_items'
            $('#' + id).hide()
        })

    }
})

解释：先获取name值为show_hide的元素。然后给该元素加上事件监听函数hover()，当鼠标移入该元素的区域内的时候就执行hover()中的第一个函数,当鼠标离开该区域的时候就执行hover()中的第二个函数。

因为在命名的时候父级元素的id命名为了service
子级元素的id命名为service_items
所以可以通过 this.id+ ‘_items’这种拼接的方式拼接子级元素的字符串然后赋给一个var 类型变量
然后通过$(’#’+id)将其转换为jQuery对象然后就可以调用show或者hide()函数来进行显示和隐藏操作