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

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

鼠标移出的时候隐藏列表

鼠标移入的时候显示列表

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

 <li id="service" class="service" name="show_hide">
          <b></b>
          <label class="rt">
            <a href="#"> 客户服务</a>
          </label>
          <ul id="service_items">
            <li><a href="#">帮助中心</a></li>
            <li><a href="#">售后服务</a></li>
            <li><a href="#">在线客服</a></li>
            <li><a href="#">投诉中心</a></li>
            <li><a href="#">客服邮箱</a></li>
          </ul>
  </li>

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()函数来进行显示和隐藏操作