这回标题说得很清楚了，就是利用 jQuery 在 WordPress 上的一个应用，什么应用呢？就是关闭或者显示侧边栏。（点击此页面导航最右边，试一试？）

csidebar_01.jpg csidebar_02.jpg

默认显示侧边栏，点击导航最右的“关闭侧边栏”，右侧侧边栏消失，左侧文章主体部分完全显示，并且导航内的文字变为“显示侧边栏”，点击则过程相反。整体效果明显，就是在IE下，经过这样过程后侧边栏内的文字杯具了……

首先，请添加下面两行代码至WordPress主题模板中，一般都放header.php的导航栏里：

 
<span class="close-sidebar">关闭侧边栏</span>
 
<span class="show-sidebar" style="display:none;">显示侧边栏</span>

jQuery代码详解，请复制以下代码并修后后另存为all.js：

 
jQuery(document).ready(function($){
 
 
 
$('.close-sidebar').click(function() {  //点击class=“close-sidebar”的对象,即导航中“关闭侧边栏”时
 
   $('.close-sidebar,.sidebar').hide();       //隐藏class=“close-sidebar”和“sidebar”的对象,即导航中“关闭侧边栏”和主题的“侧边栏”
 
   $('.show-sidebar').show();      //显示class=“show-sidebar”的对象,即导航中“显示侧边栏”
 
   $('#content').animate({width: "960px"}, 1000); }); //以1000毫秒让id=“content”的对象,即“文章主体部分”的宽度增加到960px
 
$('.show-sidebar').click(function() {  //点击导航中“显示侧边栏”时
 
   $('.show-sidebar').hide();             //隐藏导航中“显示侧边栏”
 
   $('.close-sidebar,.sidebar').show();        //显示导航中“关闭侧边栏”和主题的“侧边栏”
 
   $('#content').animate({width: "705px"}, 1000);});    //以1000毫秒让“文章主体部分”的宽度收缩回705px
 
 
 
});

看懂上面代码的童鞋应该知道需修改其中部分属性及属性值，至少你需要查看自己主题的侧边栏样式是不是class=“sidebar”，主体又是不是id=“content”，不是则修改之；另外那个宽度width值也需相应修改！

最后，在header.php里载入jQuery库及这个JS：

 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
 
<script type="text/javascript" src="http://xxxooo.xxx/xxxooo/all.js"></script>

OK，搞定！不过你现在可还没有伸缩抖动的效果，需另加载一个jquery.easing.js ，然后修改文中jQuery部分代码。为方面各位同学对照学习，提供两者合并后的JS：

off-display-sidebar.7z

友情提醒：在修改时请尤其注意，不要多删一个符号，不要少加一个符号，我就是因为少了个“);”，硬生生让我多折腾了一个多小时……

2009年12月6日：更新代码，详情看此文《”关闭/显示侧边栏”最简代码版》