在很多的地方都看见过这种效果，就是在文章页面可以切换显示和隐藏侧边栏功能，感觉还是很有用，比如一篇文章的文字内容过多，那么就可以通过隐藏侧边栏来显示更多的文字便于浏览。比如你可以通过点击我文章标题下方的隐藏侧栏按钮来查看效果。
点击前：
点击后：
实现代码：
1.在header.php中添加如下代码，当然也可以单独写进一个js文件，然后在header.php中引入也可以，我是引入的。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<script>
jQuery(document).ready(
function
($) {
$(
'.close-sidebar'
).click(
function
() {
$(
'.close-sidebar,.sidebar'
).hide();
$(
'.show-sidebar'
).show();
$(
'.content'
).animate({
width:
"1265px"
},
0);
});
$(
'.show-sidebar'
).click(
function
() {
$(
'.show-sidebar'
).hide();
$(
'.close-sidebar,.sidebar'
).show();
$(
'.content'
).animate({
width:
"885px"
},
0);
});
});
</script>
|
代码说明：将其中的1265px、885px、.content、.sidebar修改为你主题对应的文章内容页+侧边栏宽度、文章页内容宽度、文章内容容器、侧边栏容器即可。
2.在你布置该按钮的地方添加如下代码，一般是添加到文章标题下面，当然代码可以根据你自己的主题稍作修改。
|
1
|
<span
class
=
"bianlan"
><span
class
=
"close-sidebar"
>隐藏侧边</span><span
class
=
"show-sidebar"
style=
"display:none;"
>显示侧边</span></span>
|
如果有什么不懂的就留言吧。
参考网址：http://www.dedewp.com/2316.html