默认显示侧边栏，点击导航最右的“关闭侧边栏”，右侧侧边栏消失，左侧文章主体部分完全显示，并且导航内的文字变为“显示侧边栏”，点击则过程相反。
整体效果明显，如下图所示：
首先分别查看自己主题的主体样式是不是id=“primary”，侧边栏又是不是id=“sidebar”，不是则修改之；另外宽度width值也根据页面宽度相应修改！
添加CSS样式
在style.css样式表中添加如下样式：
- /**隐藏显示侧边栏**/
- #primary.primary {width: 100%;}
- .sidebar {display: none;}
添加JS控制
在网站相应JS文件中添加以下代码：
- // 隐藏侧边
- function pr() {
- var R=document.getElementById(“sidebar”);
- var L=document.getElementById(“primary”);
- if (R.className==“sidebar”)
- {
- R.className=“widget-area”;
- L.className=“content-area”;
- }
- else
- {
- R.className=“sidebar”;
- L.className=“primary”;
- }
- }
添加隐藏/显示边栏按钮
添加按钮
根据需要在页面相应位置添加显示和隐藏按钮，代码：
- <ul>
- <li class=“r-hide”><a>隐藏边栏</a></li>
- </ul>
按钮样式
以下给出一个美化按钮的参考样式，可以根据需要自行调整：
- .r-hide li a {
- color: #999;
- line-height: 26px;
- margin: 0 5px 0 0;
- padding: 0 10px;
- display: block;
- border: 1px solid #ddd;
- border-radius: 2px;
- box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
- }
- .r-hide a:hover {
- background: #568abc;
- color: #fff;
- border: 1px solid #568abc;
- }
