替部落格的側邊欄位加上縮起與展開功能

由簡睿 · 2007/03/18 | 瀏覽數: 2 / 11360

Sidebar effects
下列網址都是替部落格的側邊欄位加上縮起與展開功
能：

就我所知以上二者都是使用jQuery Framework來實作的，以下說明的版本則是以最單純的JavaScript來撰寫。

首先說明樂多的大致寫法。樂多的側邊欄
位結構如下：

Roodo Sidebar structure

側邊的標題欄類別名稱是 sidetitle，
對應的內容為平行位置的

，類別名稱是
side，
我們要做的是當sidetitle上的某個物件（即程式中新增進去的，上圖中以紅框標示）被按下時，在其
onclick事件處理程
式裡，對

做隱藏或顯示的切換。程式中用toggleSideBoxRoodo函數實作了需要的功能，請有興趣的讀者自行
閱讀。

Xuite的側邊欄位結構和樂多的稍有不同： Xuite Sidebar Structure

在＜div
class="sidetitle">裡還有兩層，程式以toggleSideBoxXuite函數實作。程式裡有做註解說明，應該是不難
理解的。

不想看程式只要使用的讀者，請自行增加一個自由欄位（樂多稱插入欄位），在欄位裡輸入下列指令即可使用：

不
知為何，IE執行上會有問題，FireFox則正常。

[jQuery] 動態建立元素的事件觸發 (0則留言, 2015/10/25)
[jQuery元件] Fancybox 3使用備忘 (0則留言, 2018/08/26)
FixedHeader.js：將網頁表格標題列固定住的程式 (0則留言, 2011/09/29)
用jQuery.formError取代alert( ) (0則留言, 2016/11/21)
在Xuite測試 jQuery (0則留言, 2007/09/12)
jQuery DataTables範例1：啟始設定 (0則留言, 2011/10/20)
使用jQuery的效益 (0則留言, 2007/09/23)
jQuery選擇器測試與範例 (0則留言, 2007/09/29)
把MyBlogLog的頭像圖形(Avatar)顯示在訪客回應裡 (4則留言, 2007/04/11)
第一個jqGrid範例：Local array (1則留言, 2010/02/13)
變更MyBlogLog的onclick事件處理程式 (V1.3修改) (8則留言, 2007/04/08)
jQuery TreeView插件IE異常解決方法 (0則留言, 2007/11/13)
jQuery在Xuite的測試 (0則留言, 2007/10/01)
使用TiddlyWiki彙總部落格文章的方法與心得 (4則留言, 2007/12/01)
在Xuite裡使用jQuery的重點 (0則留言, 2007/09/22)

簡睿

服務於軟體業的資訊老兵。興趣廣泛，學習力佳，樂於分享所知所學。

最新留言