jQuery学习笔记|jQuery实现鼠标移入时显示列表移出时隐藏列表 jQuery|js|html

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() })} })

【jQuery学习笔记|jQuery实现鼠标移入时显示列表移出时隐藏列表】解释：先获取name值为show_hide的元素。然后给该元素加上事件监听函数hover()，当鼠标移入该元素的区域内的时候就执行hover()中的第一个函数,当鼠标离开该区域的时候就执行hover()中的第二个函数。
因为在命名的时候父级元素的id命名为了service
子级元素的id命名为service_items
所以可以通过 this.id+ ‘_items’这种拼接的方式拼接子级元素的字符串然后赋给一个var 类型变量
然后通过$(’#’+id)将其转换为jQuery对象然后就可以调用show或者hide()函数来进行显示和隐藏操作