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

    });
    }
    };
    });

  • 相关阅读:
    springMVC(注解版笔记)
    关于在Eclipse里面启动了服务,但是localhost:8080无法访问的问题:
    springmvc基础知识
    private
    hashtable,hashMap,vector和ArrayList
    使用IDEA创建java项目(hello word)
    设计模式
    设计模式(总纲)
    spring-boot集成PageHelper和通用Mapper
    spring-boot集成mybatis
  • 原文地址:https://www.cnblogs.com/luoguixin/p/9150556.html
Copyright © 2011-2022 走看看