Hide-Show-Sidebar

隐藏/显示sidebar方法如下:
有两种效果(“渐隐”和“上下滑动”,我用的是“渐隐”)
将以下代码插入一个标签中,(我将其插在了index.php中的Content标签下)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>   <!--加载jQuery库 -->
<div align='right'><a href=" " title="隐藏/显示侧边栏"><span class="show-close-sidebar" >Hide/ShowSidebar 》</span></a></div>
 
<script type="text/javascript" language="javascript">
$('.show-close-sidebar').toggle
(
function () {
	$('#sidebar').fadeOut("fast");    //效果1:让侧边栏快速渐隐掉
      //$('#sidebar').slideUp(200);       //效果2:让侧边栏快速上滑
	$('#content').animate({
		width:"800px"             //让正文主体部分宽度增加到800px
	},1000);                          //执行时间是1000毫秒
 
},
function () {
	$('#content').animate({
		width:"520px"              //让正文主体部分宽度收缩到520px
	},1000);                           //执行时间是1000毫秒
	$('#sidebar').fadeIn(3000);        //效果1:让侧边栏渐渐隐现回来,执行时间为3000毫秒
       // $('#sidebar').slideDown(400);    //效果2:让侧边栏快速下滑,执行时间为400毫秒
}
);
</script>

参考资料:
[1]Leeiio.http://leeiio.me/show-close-sidebar-wordpress/.
[2]林木木.http://immmmm.com/how-to-use-jquery-code.html.
[3]老四.http://bulog.org/share/wordpress/close-sidebar.html

No related content found.

No Comments.

Leave a Reply

(required)

(required)

:alien: :angel: :angry: :blink: :blush: :cheerful: :cool: :cwy: :devil: :dizzy: :ermm: :face: :getlost: :biggrin: :happy: :heart: :kissing: :lol: :ninja: :pinch: :pouty: :sad: :shocked: :sick: :sideways: :silly: :sleeping: :smile: :tongue: :unsure: :w00t: :wassat: :whistle: :wink: :wub: