zoukankan      html  css  js  c++  java
  • 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");
    }
    });
    }());

    });
    }
    };
    });

  • 相关阅读:
    Gradview读取Excel表并插入数据库
    键盘上每个键作用!!! (史上最全的)­
    经典SQL语句大全
    [转帖] 一个老乞丐的一句话,震惊全中国人!
    GridView控件实现自定义数字、时间、货币字符串格式
    .net连接数据库相关
    论坛Email验正的正则表达式升级
    自定义DBHelper类
    在线编辑器CuteEditor使用方法
    asp.net中验证码的生成
  • 原文地址:https://www.cnblogs.com/luoguixin/p/9150556.html
Copyright © 2011-2022 走看看