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>
<div id=\"box\">
<div id=\"left\">
<div id=\"btn\">收缩</div>
</div>
<div id=\"btnb\">
显示
</div>
</div>
<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>
效果图：
以上这篇jquery实现侧边栏左右伸缩效果的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容