zoukankan      html  css  js  c++  java
  • layui 管理后台菜单栏和导航栏联动

    效果图如下:

    ps: 由于layui admin后台管理系统框架没有实现此功能,所以自己动手做了一个。

    关键代码如下:

    index.html

    $("body").delegate(".layui-tab-title li","click",function() {
    			//或者$(this).childNodes[0].data
                console.log($(this).context.childNodes[0].data);
                var Len = $("#nav li a cite").length;
                var Index;
                for(var i = 0; i < Len; i++) {
                    if($(this).context.childNodes[0].data == $("#nav li a cite").eq(i).text()) {
                        Index = i;
                    }
                    // console.log($("#nav li a cite").eq(i).text());
                }
                console.log(Index);
                console.log($("#nav li a cite").eq(Index).parentsUntil("#nav"));
                // 左侧菜单初始化
                $('.left-nav').find('a').removeClass('active');
                $("#nav li a cite").eq(Index).parentsUntil("#nav").eq(3).siblings().children('.sub-menu').stop(true,true).slideUp();
                $("#nav li a cite").eq(Index).parentsUntil("#nav").eq(3).siblings().find('.nav_right').html('&#xe697;');
                $("#nav li a cite").eq(Index).parentsUntil("#nav").eq(3).removeClass("open");
    
                $("#nav li a cite").eq(Index).parentsUntil("#nav").eq(0).addClass("active");
                $("#nav li a cite").eq(Index).parentsUntil("#nav").eq(3).addClass("open");
                $("#nav li a cite").eq(Index).parentsUntil("#nav").eq(3).find('.nav_right').html('&#xe6a6;');
                $("#nav li a cite").eq(Index).parentsUntil("#nav").eq(2).stop(true,true).slideDown();
            });
    

    到此,就大功告成了,快去试试吧。

  • 相关阅读:
    [BZOJ] 3191 [JLOI2013]卡牌游戏
    [LUOGU] P1466 集合 Subset Sums
    [LUOGU] P1113 杂物
    [BZOJ] 1003 [ZJOI2006]物流运输
    poj 2479 最大连续子段和
    C#学习第九弹之委托
    C#学习第八弹之线程基础理解
    C#学习第七弹之WPF
    hdu 2030 汉字的编码方式
    hdu 1559 暴力
  • 原文地址:https://www.cnblogs.com/lafitewu/p/11214062.html
Copyright © 2011-2022 走看看