这次给大家带来侧边栏可伸缩效果，实现侧边栏可伸缩效果的注意事项有哪些，下面就是实战案例，一起来看一下。
jquery实现点击侧边栏伸缩效果。点击收缩，侧边栏向左收缩，显示按钮显示；点击显示按钮，显示按钮向左收缩，侧边栏显示。
具体代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<style>
*{margin: 0;padding: 0;}
#box{width: 100%;height: 100%;}
#left{width: 200px;float: left;background-color: royalblue;position: relative;}
#btn{width: 100%;height: 50px;background-color: darkgoldenrod;line-height: 50px;text-align: center;color: white;cursor: pointer;}
#btnb{width: 50px;height: 50px;background-color: red;position: absolute;cursor: pointer;left: -50px;line-height: 50px;text-align: center;}
</style>
</head>
<body>
<p id="box">
<p id="left">
<p id="btn">收缩</p>
</p>
<p id="btnb">
显示
</p>
</p>
<script type="text/javascript">
$(function(){
$a = $(window).height();
$(#left).height($a);
$(#btn).click(function(){
$(#left).animate({left:'-200px'});
$(#btnb).delay(500).animate({left:'0'});
});
$(#btnb).click(function(){
$(#btnb).animate({left:'-50px'});
$(#left).delay(500).animate({left:'0'});
});
});
</script>
</body>
</html>
效果图：
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
两个ztree怎样互相联动
jquery的validate插件怎样验证输入值
ajax请求后台数据成功后无反映应该如何处理
jquery easyui 折叠面板的使用
jquery easyui选项卡面板的tabs使用
以上就是侧边栏可伸缩效果的详细内容。