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");
    }
    });
    }());

    });
    }
    };
    });

  • 相关阅读:
    Hibernate学习之缓存机制
    Hibernate学习之hibernate状态
    Ajax学习之小结
    Hibernate学习之hibernate执行顺序
    Svn入门
    Svn服务启动的两种方式
    Eclipse安装Svn插件
    一种给力的带背景的超链接的写法
    转载:IE下div使用margin:0px auto不居中的原因
    github上的Lua in Erlang
  • 原文地址:https://www.cnblogs.com/luoguixin/p/9150556.html
Copyright © 2011-2022 走看看