以京东为例简单无延迟菜单实现（三）

最新推荐文章于 2021-07-09 12:21:33 发布

yao_zhanzhan

最新推荐文章于 2021-07-09 12:21:33 发布

阅读量178

点赞数

分类专栏：网页小项目

本文链接：https://blog.csdn.net/yao_zhanzhan/article/details/88697303

版权

网页小项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

以京东为例简单无延迟菜单实现（脚本）

$(document).ready(function(){
    var sub = $("#sub")

    var activeRow
    var activeMenu

    $("#test").on('mouseenter',function(e){
        sub.removeClass('none')
    })
    $("#test").on('mouseleave',function(e){
        sub.addClass('none')
        if(activeRow){
            activeRow.removeClass('active')
            activeRow = null
        }
        if(activeMenu){
            activeMenu.addClass('none')
            activeMenu = null
        }
    })
    $("#test").on('mouseenter','li',function(e){
        if(!activeRow){
            activeRow = $(e.target).addClass('active')
            activeMenu = $("#" + activeRow.data('id'))
            activeMenu.removeClass('none')
            return
        }

        activeRow.removeClass('active')
        activeMenu.addClass('none')
        activeRow = $(e.target)
        activeRow.addClass('active')
        activeMenu = $('#' + activeRow.data('id'))
        activeMenu.removeClass('none')
    })
})

这里主要还是涉及一些jQuery的写法以及事件冒泡的应用，这打算另开博客进行梳理，其实这里的代码e.target对后面activeMenu = $("#" + activeRow.data('id'))有一个非常巧妙的操作。首先是在html页面中有data-id="a"的写法，这相当于埋下伏笔，为这里data（）方法提取id提供了简便写法。其实要想提取标签名还可以使用attr（）方法，但这个得要写全称data-id。