jquery之仿京东菜单

最新推荐文章于 2022-10-14 15:04:34 发布

原创

最新推荐文章于 2022-10-14 15:04:34 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

本文详细介绍了如何利用jQuery库来创建一个模仿京东网站的下拉菜单效果，包括菜单的展示、隐藏以及鼠标悬停时的交互行为，旨在帮助读者掌握jQuery在前端交互中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function () {
    //上菜单
    $("#ListTopUL li").hover(function () {
        //$(this).addClass("ListTopULhover");
        //$(this).siblings(this).removeClass("ListTopULhover");
        var i = $(this).index();
        document.title = i;
        $(".ListTopRight1").eq(i).show();
        $(".ListTopRight1").eq(i).siblings(".ListTopRight1").hide();
        
        
    });


    //左菜单
    $(".ListBodyLeftDiv").hover(function () {


        var a = $(this).children("a");
        a.addClass("ListBodyLeftDivAhover");
        var i = $(this).index();
        $(".listbodyRDiv1").eq(i).show();
        $(".listbodyRDiv1").eq(i).siblings(".listbodyRDiv1").hide();
        
        $("#listbodyRDiv").addClass("listbodyRDivborder");//增加一个边