隐藏/显示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

