zoukankan      html  css  js  c++  java
  • jquery之仿京东菜单


    $(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");//增加一个边框样式
    
    
        }, function () {
            $(this).children("a").removeClass("ListBodyLeftDivAhover");
        });
        //中间内容
        $(".listbodyRDiv1").hover(function () {
            var i = $(this).index();
            $(".ListBodyLeftDiv").eq(i).addClass("ListBodyLeftDivhover");
            $(".ListBodyLeftDiv a").eq(i).addClass("ListBodyLeftDivAhover");
            $(this).show();//非常重要.上级隐藏自己在显示一下!!
            $("#listbodyRDiv").addClass("listbodyRDivborder");//增加一个边框样式
        }, function () {
            var i = $(this).index();
            $(".ListBodyLeftDiv").eq(i).removeClass("ListBodyLeftDivhover");
            $(".ListBodyLeftDiv a").eq(i).removeClass("ListBodyLeftDivAhover");
            $(this).hide();
            $("#listbodyRDiv").removeClass("listbodyRDivborder");//增加一个边框样式
        });
        //leftdiv整体
        $("#ListBodyLeft").hover(function () {
        }, function () {
            $(".ListBodyLeftDiv").removeClass("ListBodyLeftDivhover");
            $(".listbodyRDiv1").hide();
            $("#listbodyRDiv").removeClass("listbodyRDivborder");//增加一个边框样式
        });
    
    
    })




  • 相关阅读:
    koa2学习(二) 中间件router
    行内元素与块级函数的三个区别
    Mobile Matrices
    jquery中attr()与prop()函数用法实例详解(附用法区别)
    jquery 鼠标右键事件、左键单击事件判定
    JS回调函数(callback)
    js关闭当前页面 (窗口)的几种方式总结
    em(倍)与px的区别
    jQuery学习笔记
    通过JS判断联网类型和连接状态
  • 原文地址:https://www.cnblogs.com/cxd1008/p/6372445.html
Copyright © 2011-2022 走看看