最近很忙，所以也就沒時間博了，連好友的 Twitter 都鮮有 @，Google Reader 都有3000+ 的未讀了，實在是罪過罪過。今早上班，瞅著博客突然想到以前用 Bo-Blog 以及 PjBlog 的時候，發現他們都是有關閉/顯示側邊欄的功能的，那時候 jQuery 還不流行。於是我想，給自己現在的 Blog 加上這麼個功能那將是比較酷的，除此之外，因為隱藏掉了側邊欄，主體內容區域就變大了，瀏覽文章特別是圖片很多的攝影作品欣賞類的文章的時候，那將會帶來不錯的閱讀快感，至少我是這麼覺得的。當然，好東西要分享，那麼大家請跟著我以下的描述來一起動手吧。
當然，前提還得是你的部落格載入了 jQuery 庫，推薦你使用 Google Ajax Library 的 jQuery 調用地址。
首先在你的網頁中你想要顯示 關閉/顯示側邊欄 的提示按鈕或者文字，我這裡就舉個簡單的例子，比如在你的 WordPress 模板中插入
<span class="show-close-sidebar">關閉/顯示 側邊欄</span> |
接著就是 jQuery 功能代碼部分了，請先看以下這段代碼：
<script type="text/javascript" language="javascript"> $('.show-close-sidebar').toggle(function () { $('.sidebar').fadeOut("fast"); //讓側邊欄快速漸隱掉 $('#content').animate({ width:"915px" //讓正文主體部分寬度增加到915px },1000); //執行時間是1000毫秒 }, function () { $('#content').animate({ width:"700px" //讓正文主體部分寬度收縮到700px },1000); //執行時間是1000毫秒 $('.sidebar').fadeIn(3000); //讓側邊欄漸漸隱現回來，執行時間為5000毫秒 } ); </script> |
是吧，代碼非常的簡單，並且我做了代碼格式化，大家看起來結構比較清晰點。然後我稍作講解。
這裡使用了 jQuery 中的 toggle() ，fadeIn() ，fadeOut() ，animate() 這四個函數，API參考文檔可以看這個 jQuery API 參考文檔在線中文版，也可以去 jQuery 官方文檔看。
以上的功能代碼用中文表述的意思就是當 class 為 show-close-sidebar 的元素被點擊的時候，執行 toggle 函數，toggle 函數裡面有兩個 function ()，之所以有兩個是因為要讓那個被點擊的元素點擊第一次和第二次的時候執行不同的功能，不然你看如果把側邊欄給關了，不就無法恢復了么，您說是不是？在第一個 function () 函數裡面，我先讓 class 為 sidebar 的元素(就是我的側邊欄，你的側邊欄是什麼 class 就替換成什麼)漸隱掉，然後讓 ID 為 #content 的運行 animate() 函數，animate()函數裡面就是讓那個 ID 為 #content 的元素寬度增加到 915px，也就是讓你的正文區域擴大寬度，這不側邊欄不是被隱藏了么，當然要把正文區域增寬回來。1000 是執行的時間，單位是毫秒，你自行控制。下一個 function () 函數無非就是倒過來寫，先執行讓 #content 縮小然後再出現側邊欄，這樣效果看起來比較自然，不然一開始側邊欄重新顯示出來的時候被 #content 給遮擋了，然後#content再收縮回原來的寬度的時候，你就看不到側邊欄顯示出來的那種效果了。
演示見本站頂部導航 Show/Close Sidebar。
我想這樣的中文解釋不知道是否給你們帶來了更大的困惑，如果有不明白的就給我留言，我會一一解答。
當然，要想實現本站收縮的時候的那種抖動效果，你可以調用 Easing 插件。
jQuery 庫真是個易用且龐大的 javascript 庫，當然我這些都是皮毛技巧，總是想要實現什麼效果了然後去 API 文檔看看都有哪些效果然後再寫代碼，這樣很不好，導致的後果就是有可能有更好的辦法可以不用這麼麻煩的功能函數而用一些簡單的函數就能實現效果。所以我準備系統地去研究學習下 jQuery，畢竟我連 Javascript 也不會，總是這麼折騰也不是個事兒，總得讓自己專業點，你說是不是。
請大家繼續關注本部落格，也可以 Follow 我的 Twitter，稍候我可能要放送 jQuery 的入門系列文章了，有興趣地歡迎和我一起學習 jQuery。謝謝觀賞！
昨天一個朋友還給我發來一個包說都是他收藏的js代碼。。讓我趕緊學會了就能用了。。
正好你開始講了~我就搬個小板凳等教程咯~
😆
演示見本站頂部導航 Show/Close Sidebar。
我在找這個的時候沙發就被人搶了。可是我還是沒找到=。=
@plidezus 哈，敬請期待~
@Sivan 呃，加錯行了，加到了判斷是否為管理員才能看到某個導航的下面行內容了，現在可以看到演示了吧~
我喜歡那切換的動畫…
@Leeiio 看到了，好酷。而且這個跳動特效也很酷~
真牛比啊，哈哈，很炫很不錯
jQuery 的效果確實很炫，看看是否適合用在我的博客上，感謝！
很好看呢，我也看看是否有用上的主意 💡
又加新玩意
@Yacca 效果越酷越能唬住人哈！
@Sivan @恬瑋兒 恩，酷吧酷吧不是罪～
@welee 話說你的主題不是單欄的麼？
@Jinwen @yinheli 總是忍不住要折騰哈～
不錯不錯！！有點像切換 CSS 的意思！！
我一直想做這個效果來著，卻一直沒有空實踐一下，哈哈，終於還是有人做了。我個人的話，更傾向於讓main content部分居中，而不是變寬。因為，我覺得，一般人的閱讀習慣應該不喜歡看很長很長的行。比如報紙，都是很短的行，我想那樣應該讀著更舒服。
@xiaorsz 用jQuery切換css么？
@Charles 內容居中了，中間一大塊的兩邊是空出來的，不知道會不會有點怪。
恩，不錯的哈。不過右面的文本框過長了。
好吧..不可否認,我對你有點小崇拜
這個效果有點意思哦~
這幾天你的博在Chrome下網頁打開都不完整，換上FF才登上來瞅瞅。。估計你這個水果族體會不到啊
呵呵
@Lorz 右面的文本框？
@Yuri 過獎了哈～
@Zoll 現在加了詳細的loading條，能幫我看看卡在哪兒麼？沒準是因為之前google ad失效了～
哇色，你的腳本不是一般的多呀，呵呵~
因為用FF打開沒有問題，用Chrome又不好檢查。。稍微說一下：
各個部分的背景圖片都沒有顯示，字體排版的樣式沒有載入，側邊欄跑到了底下，左側的go top和go bottom的圖標橫起來了到了最頂上。
這情況是從剛開始載入時就出現的，估計問題在代碼的頭部。。
@Zoll 難道google Chrome不支持css壓縮成php？我的blog下一部準備優化速度了呵呵，太多js了～
你的主題效果真多
Show/Close Sidebar 放的位置有點不太容易找哦
@任平生 把導航改成中文了，我想對於中文用戶更加親切了～
嘿，過渡動畫真不錯！
@aunsen 嘿，是挺不賴的～
享受閱讀的快感……那過渡的效果是不錯的~
@吖Bee 在IE下似乎有點卡，你覺得呢？推薦對比下firefox下的~
……firefox跟Chrome那效果好很多~~
你的博客已收錄，來找找看吧！歡迎交換鏈接。面譜 http://www.mianpu1000.com
怎麼用jQuery來來實現RSS訂閱彈出這個效果~mg12那個跟jQuery有衝突，也很長……
我非常正式地嚴肅地在左邊添上了我的名字，然後點了提交評論 =。=
啊，這Blog的設計太帥了…非常清新…非常好看～ 😳
@Donald 啊，您真是太客氣了，被您說得有點不知所措了。
這主題清新舒服。。
看來我的主題確實比較刺眼了…
真的很牛！！~~
啊，今天看起來就更舒服了，昨天整個版面是貼著左邊的，嘿嘿…
我已經把你加到ADP的白名單了，嘿嘿…
這樣有點卡
@nooidea 哈哈，謝謝～你的主題其實就是文字白色直接在紅色底上有點眨眼而已。
@Snow愛美麗 謝謝姑娘誇獎！
@Donald 今天做了深刻地檢討，從左傾變成了中立分子。
@雪深 其實是不卡地，我也不知道為什麼，在IE下地效果看來是卡卡的，你可以換Firefox或者Chrome或者Opera或者Safari看看哈～
不想折騰！
感覺這樣挺累的。。
期待越來越多的作品，HOHO~~
相當不錯的效果啊~
我之前也用jQuery寫過一些效果，但是考慮到將來工作需要，還是硬頭皮把Javascript啃下來吧（進行中）。畢竟很多js的運行機制跟思路還是需要打好基礎的
@Leeiio 估計是IE6的毛病
@eddie 我也是準備啃Javascript，jQuery用起來是方便呵呵～
效果真炫！
還是居中的好啊
回來逛逛~~
@吖Bee 好久沒更新了～
牛啊！太炫了
評論框之尊姓郵箱網址等框框紛紛出界 望從速修正之
😯 你這裡真好玩~！！ 令人嫉妒~~
LZ的Blog很華麗而簡潔.貌似用了大量JS效果 – –
jQuery是個好東西,要是不用類庫自己實現淡入淡出效果得累死
😎
@noir 只有Mac下的safari才有問題，十分古怪。
@Snow 呃…
@小野大神 jQuery確實挺易用的，十分方便。對你的繁簡轉換插件很有興趣~
驚奇的看到很多MAC OS，呵。又，回複評論前邊的那個「@」效果不錯，又比較實在；其他的特效個人覺得有點花哨，喜好不同吧。
##############################
還是請教一個問題，像，返回類別後，滑鼠在其上方懸停，在我的頁面會顯示「查看 category 下的全部文章」，你的略有不同，你是用的插件，還是把函數加入div標籤？
哎呀呀。真好玩。
你的homepage就像是個小魔方
@smao 在類別管理那裡可以填上該類別的信息的，後台就可以設置～
@千葉 你用IE看這個效果不卡麼？
@Leeiio 不是啊，我留言中的一個函數好像被屏蔽掉了，是 the_category(‘, ‘) 顯示出的是你文章標題，像你這篇文章的最前端的「Home > WordPress Plugins, jQuery > 關閉/顯示你的 WordPress 側邊欄，享受閱讀快感」，把你的滑鼠移上去顯示「查看 category 下的全部文章」不是側邊欄的那個，那是category_list 函數。可以修改嘛？
@smao 我不是用的category_list函數，我這裡的顯示是這樣的，你參考下。
<a href=”<?php echo get_option(‘home’); ?>” title=”返回首頁”>Home</a> > <?php the_category(‘, ‘) ?> > <?php the_title(); ?>
我現在覺得我看什麼都卡 😯
@千葉 呃，IE不支持些東西，看本站的一些效果還是會怪怪的，不流暢~
Pingback: 升級版！Cookies 記錄你的 Wordpress 側邊欄關閉/顯示的狀態 - Leeiio Chaos Made.
學習學習~~
@whisperer
指教指教~
孫文先生說過 不懂就要問.
怎麼在模板中插入,我咋沒效果呢?Easing 插件怎麼調用。
請大哥詳細指教一下.
3Q
@Accecc
呃，話說你看懂代碼了么？
@Leeiio
暈。沒有你的正文收縮的效果。只有側邊欄消失的效果。
能幫我看看是什麼原因么?
開關按鈕在文章旁邊呢。
@Accecc
你好像撤下了？沒有正文收縮是什麼意思？那個我的代碼裡面注釋寫得好像挺清楚了的，你再仔細看下？
@Leeiio
現在我已經放上去了,你幫我看一下需要修改什麼地方么.
不好意思~~
JS我是用的你的=。=
你直接都拿過去你會後悔的，因為很多用不到的代碼會讓你的博客速度變慢或者出現混亂的情況，推薦你仔細閱讀本文，哪裡看不懂再問~
@Leeiio
成功了,謝謝你!
還有些小細節 我會慢慢修改的. 🙄
Pingback: RSSA頻道 » Blog Archive » 魔獸世界同人動畫片《我叫MT》
不錯!謝謝!
那段JS代碼放在哪裡挖？？
@一塊冰兒
推薦放底部</body>之前，當然你放任何地方隨意的。
內容是王道啊，是個好東西
Pingback: 側邊欄(開/關)測試…完美 | MOPVHS's Blog
你左邊那個導航欄是怎麼做的？
在ie6下面可以正常使用么？
關閉/顯示 側邊欄 這段代碼放在哪裡？請教你一下！呵呵
不錯。想請問一下，關閉/顯示 側邊欄這段代碼最好是加在哪裡呢？
@eallion 網頁代碼最末尾</body>之前即可
功能是不錯，就是寫的太含蓄了，搞了半天效果出不來！
好複雜啊……
Pingback: test | 宅之小聚
請問如果我想打開一個頁面默認情況下就是隱藏側邊欄，然後點一下開關後文章區域縮小，側邊欄彈出。這代碼該怎麼改呢？