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 {
width: 0px !important;
overflow: hidden !important;
padding: 0px !important;
}
.left-collapse-trigger {
width: 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;
width: 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");
}
});
}());

});
}
};
});

扫描二维码关注公众号，回复： 1513194 查看本文章