Creative Commons License
發卡布洛 所有內容 採用
創用 CC 姓名標示-非商業性-禁止改作 2.5 台灣 授權條款授權.

2009-2-20 更新:

痞客邦側邊欄位伸縮選單有更容易的配置方法囉

自從上次發現痞客邦的布洛格里內建jQuery的函式庫之後,我就在想除了隱藏文章的效果之外,還可以有什麼樣的應用。想起前幾年有個無名小站的達人fuyei使用expression來配置伸縮選單的效果,由於這個效果Firefox不吃,只能在IE下使用,所以我就想說試試看是否能夠使用jQuery來達成這個效果。

jQuery果然沒讓我失望
結果就如現在各位在右側看到的這個伸縮選單效果→
再次證明jQurey的功能是非常強大的
也很謝謝痞客邦給我們這麼高的網頁編寫程度~

這個效果要怎麼使用呢?

首先請在你的側邊欄位設定公告欄位內加入以下內容並送出:

 

<script type="text/javascript">
jQuery(function($){
$("h4.box-title").css({cursor:"pointer"}).click(function(){
$(this).next().toggle("normal");
      });
});
</script>

 

(如圖所示)

toggle.jpg

其中的normal為選單的開啟速度,還可以使用fast(快)、slow(慢)兩種值。

接下來請到CSS中加入以下語法,把側邊欄位內容的預設狀態設為隱藏:

.box-text{
display:none;
}

要是有些重要的側邊欄位不想要在開網頁時就隱藏的話,請另外再撰寫那個區塊的CSS,把它打開:
(請寫在上一個語法的下面)

#box123456 div{
display:block;
}

其中,#box123465為側邊欄位的ID名稱,請自行尋找。

不會找的人請繼續往下看:

請先到你的部落格中>檢視原始碼。

IE

s1i.jpg

Firefox

s1f.jpg

打開原始碼,然後假設你要找「文章分類」的ID名稱,就在文字編輯器中找「文章分類」

IE

s2i.jpg

Firefox

s2f.jpg

以下幫網友們找出幾個痞客邦預設區塊的ID名稱:

#WARSTICKER → 宅男最後戰役
#LOOKFORASTAR → 劉德華[游龍戲鳳]上映倒數中
#ADIDASMYSELF → 我的目標+10
#announce → 站方公告
#search → 部落格文章搜尋
#headshot → 個人頭像
#category → 文章分類
#recent-article → 近期文章
#latest-comment → 最新迴響
#calendar → 月曆
#subscription → 最新訂閱
#counter → 參觀人氣
#boxevent_clubbroadcast → 小圈圈雷達
#mylink → 我的連結
#feed → 新聞交換(RSS)
#favorite → 我的蒐藏
#latest-trackback → 最新引用
#archive → 文章精選
#powered → POWERED BY
#hiiir → 好時光貼曆
#visitor → 誰來我家
#crumb → 我去誰家
#broadcast → 碎碎唸聯播
#murmur → 我的碎碎唸
#hot-article → 熱門文章

注意:

自己設定的區塊ID名稱都是隨機產生的,就要靠自己尋找了~

bshadow 發表在 痞客邦 PIXNET 留言(38) 人氣()


留言列表 (38)

發表留言
  • 悄悄話
  • bluegirl73623
  • 恩嗯!我解決了唷!
    真是太感謝你的幫忙了,這篇我拿去延伸閱讀喔^^~
  • bluegirl73623
  • 我教學寫好了有延伸你的教學文章!
    也有在底下連結了你你文章位置,非常謝謝唷!
    在這裡學到不一樣的很多好玩的語法。
  • 不客氣 :]
    自己寫的東西能有人使用我也很高興
    也謝謝你幫我宣傳出去

    bshadow 於 2009/02/01 00:42 回覆

  • cow
  • 另外,我想問

    因為我欄位的id都一樣...

    所以有什麼辦法把某些欄位結強制打開
  • 如果是這樣就有點麻煩了:



    其中的eq(0)、eq(2)
    就是強制開第一跟第三個區塊(0是第一、1是第二、2是第三...以此類推)
    這個部份可以增加或修改
    由於每個人版型不太一樣
    序號可能也會不一樣,可以自己try try看

    bshadow 於 2009/02/01 17:58 回覆

  • 牛
  • 說實在的我根本不懂css那玩意 ~囧~

    你的回應有點不懂:


    上面的語法是貼到css嗎?

    所謂的序號是?


    抱歉~問題好像太多了

    很謝謝你之前的回應

    如果我的悟性太差,就算了 謝謝!
  • 哈哈 不會啦
    其實那個也不叫序號(只是講元素索引值可能更多人不懂…)
    你可以把它想成是每個區塊的編號
    以你的blog來說
    你的「個人檔案」區塊為eq(1)
    「幾點啦」為eq(2)
    「一堆又一堆」為eq(3)
    以此類推

    假設你要把「幾點啦」強制做顯示,就在語法中加入:
    $(".sideColumn div").next().eq(2).css({display:"block"});
    要把「一堆又一堆」強制做顯示,就在語法中加入:
    $(".sideColumn div").next().eq(3).css({display:"block"});

    依上次回覆你的格式加在原始的語法中就可以了
    如果還有問題可以再留言喔 :]

    bshadow 於 2009/02/01 22:16 回覆

  • 牛
  • 恩,我照你所說把語法都貼在css裡(也把之前所貼的 id代碼div{display:block;}) 刪掉)

    因為我要顯示個人資料和文章分類就改成eq(1)和eq(4)

    但是失敗了,全部都"黏"在一起

  • 不是貼在CSS中喔
    是貼在自由欄位中~
    我發現你貼到兩個語法了
    現在點側邊欄位會開了又關

    請把「一堆又一堆」那個欄位所貼的伸縮語法刪掉
    再把「幾點啦」那個欄位所貼的伸縮語法改成:


    這樣就可以了~

    bshadow 於 2009/02/02 14:13 回覆

  • cow
  • 只有個人資料會顯現

    但是文章分類卻沒有
  • 嗯嗯,我知道問題在哪裡了。
    文章分類的部份他的寫法比較複雜所以有衝突 :(
    你試試這個應該就可以了:

    bshadow 於 2009/02/03 03:35 回覆

  • 牛
  • 很謝謝你的熱心教導!!! ^ ^

    這樣果然變的很酷酷酷(笑)
  • edwina0301
  • 不好意思,因為我開學了,
    沒辦法常常上線,所以問題多了點。請見諒。
    想請教你,
    一開始呢,我先把全部強制隱藏,但是文章分類自己都會顯示。

    而你上面所說的強制打開,我是了好幾次,還是不行欸。
    那些編號弄得我勿薩薩,

    #box123456 div{
    display:block;
    }

    這東西到底是要貼在哪邊?
    是CCS嗎?如果是,貼在CCS裡的哪?
    如果是貼在自由框裡面,有些是只會出現標題的,怎麼貼?

    謝謝你=)
  • 那個#box123456不是真的要你打#box123456
    你要查看原始碼找那個區塊的ID名稱
    如果不會找的話請到你的留言版,我有回覆你了~
    這語法是貼在CSS裡面沒錯,請貼在CSS的最下面。

    bshadow 於 2009/02/10 23:18 回覆

  • MDLuffy
  • 如果只是要設定某個部分要隱藏~
    那有比較方便的方法嘛??
    請教一下大神~~
  • 那你就不要用
    .box-text{
    display:none;
    }
    把全部隱藏

    只要隱藏你想隱藏的區塊就好
    例如你想隱藏參觀人氣
    就這樣寫:
    #counter .box-text{
    display:none;
    }

    bshadow 於 2009/02/11 21:42 回覆

  • 菲菲
  • 感謝版主的教學,受用無窮 ^^
    因為有兩位網友來向我留言詢問這個語法
    所以我將版大的這篇教學文章的網址給他們了
    希望版大不會介意喔 ^^"
  • 不客氣 :]
    建議可以用另一篇的方法配置會比較簡單喔:
    http://bshadow.pixnet.net/blog/post/23206090

    bshadow 於 2009/06/17 22:11 回覆

  • sakuranaoko
  • 好厲害唷!受益良多.謝謝板大提供
  • 不客氣 :]

    bshadow 於 2009/06/17 22:10 回覆

  • 菲菲
  • 又來叨擾 XD

    想請問一下版大
    我使用的是這篇文章中的語法
    請問是否可以改成滑鼠觸碰自動收合效果呢?
    我有爬文看到這篇文章http://jertsai.pixnet.net/blog/post/23546640
    不過她的語法和這篇文章的語法不同(其實是我懶得全部重新更換 XD)
    所以想問問是否可以直接從這篇文章所分享的JS語法中修改即可??
    上述的教學文章網址中提到
     將點擊換成觸碰:
     將此onclick換成onmouseover
     變成<a onmouseover="pix......
    那麼這篇文章的JS語法是否也可以改CSS只另也變成滑鼠觸碰便自動收合效果呢?
  • 在此篇的方法中,你只要把第三行的click改成hover就可以做到這個效果了喔。

    bshadow 於 2009/06/21 22:30 回覆

  • 菲菲
  • 原來那麼簡單喔 XDD
    謝謝版大的解說喔 ^^
    不過我剛剛試改了之後,測試效果感覺滑鼠觸碰式會變得有點"神經質" XDD
    (就是滑鼠如果在側欄標籤附近徘徊,它們會像卡到陰一樣不斷地開開合合)
    所以說.....我還是使用原本的效果就好(我好像來亂的~~囧)
  • 的確,我之前也有想過用這個方法,但效果並沒有用點選的好。

    bshadow 於 2009/06/22 03:29 回覆

  • star86109
  • 板大~~
    我的側邊欄位滑鼠一按下去
    就會跑上跑下的~~
    這種情況要怎麼辦阿??
  • 抱歉
    我不太了解跑上跑下是什麼意思耶^^"

    bshadow 於 2009/06/29 01:00 回覆

  • 悄悄話
  • 悄悄話
  • 犬
  • 感謝分享!!很實用..我也一直在找說,朋友介紹的..呵呵..真的蠻方便的,又沒太複雜的語法...
    特來感 謝^^
  • 不客氣~

    bshadow 於 2009/09/20 10:05 回覆

  • Cee
  • 非常感謝您的分享,真的是受益良多了 ^^
  • 不客氣~

    bshadow 於 2009/09/20 10:05 回覆

  • aribeth
  • 很感謝您的教學
    真的是獲益良多呢^^
    現在部落格的側欄也不會亂七八糟了^^
  • 不客氣~

    bshadow 於 2009/09/20 10:06 回覆

  • hebie
  • 很好的一個功能
    帶回家研究
    謝謝分享這麼有用的東西^^
  • 不客氣~

    bshadow 於 2009/10/03 10:56 回覆

  • fifi7202
  • 謝謝大大的教學^^
  • you're welcome~

    bshadow 於 2009/11/13 14:40 回覆

  • a3696467
  • 感謝分享教學~

    我用那篇"更容易的配置方法"沒有效果...

    用這篇的教學才OK =3=
  • amway6712426
  • 非常謝謝你!
    我實驗成功了,而且超級簡單的!^__^
  • 不客氣唷~

    bshadow 於 2010/03/10 11:23 回覆

  • 悄悄話
  • 悄悄話
  • Bell
  • 請問FC2Blog可以用jQuery嗎??
    有什麼方法可以實現的像這樣漂亮??
  • DreamMax
  • 感謝!受用了
  • patty30925
  • 那有辦法可以讓文章
    只要點文章標題 然後就直接顯現整篇文章這樣嗎?(就是不用再點繼續閱讀
  • 悄悄話
  • 悄悄話
  • 小池野夏
  • 想問一下....

    雖然語法成功

    可是....她並沒有一開起網頁就隱藏 而是要自己點她才會隱藏

    這..怎麼辦?
  • 小池野夏
  • 還有....那個...就是某些區塊不想隱藏 要另外撰寫CSS 請問..要怎麼寫?
  • 悄悄話
  • 悄悄話

您尚未登入,將以訪客身份留言。亦可以上方服務帳號登入留言

請輸入暱稱 ( 最多顯示 6 個中文字元 )

請輸入標題 ( 最多顯示 9 個中文字元 )

請輸入內容 ( 最多 140 個中文字元 )

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼