关闭/显示侧边栏简洁
<div class="close-sidebar"><a href="#">关闭侧边栏</a></div> <div class="show-sidebar" style="display:none;"><a href="#">显示侧边栏</a></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script language="javascript"> jQuery(document).ready(function($) { $('.close-sidebar').click(function() { $('.close-sidebar,.sidebar').hide(); $('.show-sidebar').show(); $('.content').animate({ width: "1238px" }, 1000); }); $('.show-sidebar').click(function() { $('.show-sidebar').hide(); $('.close-sidebar,.sidebar').show(); $('.content').animate({ width: "838px" }, 1000); }); }); </script>
.close-sidebar,.show-sidebar{float:right;margin:-5px 0 0 10px;padding:5px 10px;text-align: center;text-shadow: 0 1px 1px #ccc;background-image: -webkit-linear-gradient(top, #fbfbfb, #e6e6e6);background-image: -moz-linear-gradient(top, #fbfbfb, #e6e6e6);background-image: -ms-linear-gradient(top, #fbfbfb, #e6e6e6);border: 1px solid #ccc;border-bottom-color: #bbb;border-radius: 1px;box-shadow: 0 2px 2px #ddd;} .close-sidebar a,.show-sidebar a{color:#333;} .close-sidebar:hover,.show-sidebar:hover{background:#f6f6f6;} .close-sidebar:active,.show-sidebar:active{background:#f6f6f6;box-shadow: inset 0 2px 4px #ddd;}
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/187.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!