在很多的地方都看見過這種效果，就是在文章頁面可以切換顯示和隱藏側邊欄功能，感覺還是很有用，比如一篇文章的文字內容過多，那么就可以通過隱藏側邊欄來顯示更多的文字便於瀏覽。比如你可以通過點擊我文章標題下方的隱藏側欄按鈕來查看效果。
點擊前：
點擊后：
實現代碼：
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