• jquery左右滑动菜单


    <div class="mini-container" style="position:relative;height:100%;">
    <div class="left-collapse-trigger" title="隐藏侧边栏">
    <i class="fa fa-angle-left fa-2x"></i>
    </div>
    <div class="bg-info min-condition condition-content" data-id="condition-info">

    </div>
    </div>
    <style scoped>
    .left-collapse .min-condition {
    0px !important;
    overflow: hidden !important;
    padding: 0px !important;
    }
    .left-collapse-trigger {
    40px;
    height: 40px;
    border-radius: 20px;
    background: rgba(202, 202, 202, 0.4);
    position: absolute;
    left: 240px;
    top: 45%;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    color: #fff;
    display:flex;
    }

    .left-collapse .left-collapse-trigger {
    left:-10px;
    }

    .condition-content {
    position: absolute;
    transition: width 200ms;
    z-index: 999;
    left: 0px;
    top: 0px;
    bottom: 0px;
    overflow: auto;
    260px;
    padding: 15px;
    background: #f7f5f5;
    }

    .main-content {
    position: absolute;
    left: 265px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    }
    </style>

    define([], function () {
    return function () {
    this.show = function (module, root) {
    root.load("telemetry/dataSearch/cesi.html", function () {
    //侧边栏绑定
    (function () {
    $("body").on("click", ".left-collapse-trigger", function () {
    $(this).attr("title", "展开侧边栏");
    var $brother = $(this).parent();
    var isExpand = true;
    if ($brother.hasClass("left-collapse")) {//已经折叠
    $brother.removeClass("left-collapse");
    $(this).attr("title", "隐藏侧边栏");
    $(this).children("i").removeClass("fa-angle-right").addClass("fa-angle-left");
    }
    else {
    isExpand = false;
    $brother.addClass("left-collapse");
    $(this).attr("title", "展开侧边栏");
    $(this).children("i").removeClass("fa-angle-left").addClass("fa-angle-right");
    }
    });
    }());

    });
    }
    };
    });

  • 相关阅读:
    MySql中启用InnoDB数据引擎的方法
    云说的到底对不对,京东到底行不行?
    hibernate HQL查询的参数绑定
    MySQL到底能支持多大的数据量?
    C# RSA和Java RSA互通
    Log4j 2使用教程
    Log4j.properties配置详解
    JMX 基础Demo
    iBatis缓存实现源码分析-FIFO,LUR实现方法
    SqlMapClient 创建过程之SqlMapConfigParser源码走读
  • 原文地址:https://www.cnblogs.com/luoguixin/p/9150556.html
Copyright © 2020-2023  润新知