Photo


I'm Wei

Traveler / Photographer / Designer

旅行除了美麗的風景,最重要的是途中發生的點點滴滴,唯有照片與文字的交織,才能讓美麗的回憶不朽。這本部落格是份珍貴的禮物,獻給多年後的自己,有那麼一天,曬著午後慵懶的日光,溫習當年青春的味道。部落格取名為 Dribs & Dribs,為 "點點滴滴" 之意。

 

▸ Facebook:Dribs & Drabs

▸ Instagram:dribs__drabs

▸ Mail:weilife.blog@gmail.com

▸ Pixnet訂閱:weilife

1407505443-3174794774

當Q&A問與答累積到一定數量時,就很需要這個功能,方便訪客尋找需要的問題,版面也不會太過冗長

不一定只適用於Q&A,像商品列表、留言列表等都是不錯的延伸應用

 

 

 

先看下方的範例,或是看本站的Q&A問答集

(請點選標題,內文會自動出現在下方。若無法點選請重新整理網頁,有時是因為網頁還在載入資料中)

 

Question - 1

Answer - 1

Question - 2

Answer - 2

Question - 3

Answer - 3

 

 

(0) 先前題提要

需要一點HTML概念,但很簡單,只要照著步驟應該都沒問題

 

(1) jQuery

先至後台>側邊欄位設定,建立一個新版位,標題可設成"Q&A設定",接著把以下語法放入

也可以放在公告區塊或是頁尾描述,但之後會比較不好管理

(不好管理的意思是怕之後忘記這段語法的功能,新增版位可以設定版位標題一目了然)

 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">

jQuery(function($){

$("p.Question").css({cursor:"pointer"}).click(function(){

$(this).next().toggle("normal");

});

});

</script>

 

(2) CSS

這部分是美化的語法,放在跟(1)一樣的地方,接在後面即可,可自行修改美化

ps. 本站的Q&A範例因配合版面有做修改,所以大家套用後會跟範例長得不太一樣喔

 

<style type="text/css">

#QandA .Question{ /*標題的CSS定義*/

width: 100%;

border-bottom: 1px #aaa dotted;

}

#QandA .Answer{ /*內文的CSS定義*/

display: none;

width: 100%;

padding: 10px 0px;

background: #efefef;

border-bottom: 1px #aaa dotted;

}

#QandA:hover{ /*滑鼠移至區塊變色*/

background: #ebf6f7;

}

</style>

 

(3) HTML

這部分的語法要放在文章中,需要開啟HTML模式再放入,建議直接在HTML模式編輯

這邊需要一點HTML基礎,至少要知道如何把這段語法放到想要的位置

標註顏色的地方是Q&A的標題與內文,需自行修改

以下範例是兩個Q&A,若要多個就複製HTML語法接在後方即可

ps.如果要看成果只能把文章存檔到部落格觀看,按痞客後台的預覽是沒有用的喔!

 

<div id="QandA">

<p class="Question">Question - 1</p>

<div class="Answer">

<p>Answer - 1</p>

</div>

</div>

<div id="QandA">

<p class="Question">Question - 2</p>

<div class="Answer">

<p>Answer - 2</p>

</div>

</div>

 

Murmur

應該還算簡單吧,只有第三步驟需要一點手動 :)

不過要注意,只要部落格裡有一篇文章有用到這技巧,第一、二步驟的語法就不能刪除,不然會失效

 

♥ 部落格樣式 - 實用教學: http://weilife.pixnet.net/blog/category/1358731

文章標籤
創作者介紹

Dribs & Drabs 點點 滴滴

Dribs & Drabs 發表在 痞客邦 PIXNET 留言(69) 人氣()


留言列表 (69)

發表留言
  • 悄悄話
  • 悄悄話
  • 芮妮
  • 你好 我找到原因了
    真的很謝謝你>////<

    希望我的貓咪可以一直長壽下去^0^
  • 不客氣喔:)
    祝你的貓咪健康快樂!

    Dribs & Drabs 於 2014/08/12 20:12 回覆

  • 凱亭恩#
  • 謝謝語法幫助唷:) 很實用的教學!!! wei 語法真是厲害!!!
  • 不客氣 :D
    很高興能幫到你!

    Dribs & Drabs 於 2014/08/12 22:13 回覆

  • 孟親
  • 謝謝Wei姐姐的教學
    孟親第一次把語法弄成功ˊˇˋ
    感覺好開心:)
  • 不客氣 :)

    Dribs & Drabs 於 2014/08/17 16:19 回覆

  • 悄悄話
  • 孟親
  • 真的嗎??還是是因為我家的電腦驅動程式不構
    所以感覺跑得很慢@@因為這台電腦原本是家人再用
    當初買來的時候效能就有點慢!所以開蠻多網頁都會盪盪的呢ˊˋ
    好,孟親知道了!!
  • 因為這幾次看你的部落格都很快就開起來了
    也許是電腦的關係吧~但我的電腦是小筆電,是說效能也沒有多好啦ORZ

    Dribs & Drabs 於 2014/08/17 19:59 回覆

  • 孟親
  • 這樣子唷@@看來是孟親自己家的電腦的問題呢~
    小筆電阿~孟親的是桌機!不過這台也有用了三四年左右了
    可能裡面的效能也已經慢慢的衰退了><
  • 電腦就是會越來越慢,要清理或重灌才會變快~"~

    Dribs & Drabs 於 2014/08/17 22:04 回覆

  • 孟親
  • 我這台電腦都有家人的資料不敢重灌跟清理呢@@
  • 那只好忍耐了,哈!

    Dribs & Drabs 於 2014/08/18 19:31 回覆

  • 悄悄話
  • 悄悄話
  • 島田春奈
  • 怎麼沒有示範圖片?我用用看
  • 範例在圖片下方第五到七行

    Dribs & Drabs 於 2014/10/05 11:43 回覆

  • Yusen
  • 似乎後來有修改一些語法,新的語法我套用後無法展開OAO

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

    這是之前複製下來的語法,套用後就能展開了OuO
  • @@?
    你是說目前這篇文章的語法失效了嗎?
    可是我看文章上的語法跟你貼的是一樣的@@

    Dribs & Drabs 於 2014/11/07 21:28 回覆

  • Yusen
  • 那可能是我不小心多複製了一些東西,那時我貼上舊的去比對時看到行數有些差異,謝謝你的回覆OuO
  • 喔喔,那就好 :)

    Dribs & Drabs 於 2014/11/09 08:27 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • Ariel.Chen
  • 請問一下,不知道為甚麼可以點擊,但是答案卻跑不出來呢? (就是會有意曾空白調動可卻都沒文字) 嗚嗚嗚嗚
  • 我看你的問題都已解決,之前的留言就不回覆囉

    Dribs & Drabs 於 2015/01/10 23:08 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 雨纓高興見到你
  • 終於找到了QAQ
    這很不可缺的程式碼語法OUO"
    一次成功:D
    感謝你的分享:-)
  • 不客氣 :)

    Dribs & Drabs 於 2015/02/05 14:33 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 筱琪
  • 我是使用這篇的文章語法出問題
  • 要給我文章的網址,我才知道問題出在哪裡
    另外你可以先檢查一下,若語法貼上去都不修改會不會有你說的那個問題

    Dribs & Drabs 於 2015/05/25 21:21 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 筱琪
  • 但完全po你的原始碼,沒有加上其他東西,只有改中文部份....但是我的確其他地方我是有用到<br> 這也會影響到嗎???謝謝
  • :)

    Dribs & Drabs 於 2015/05/30 23:36 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 喵仔 ฅ(OωO  ฅ
  • 請問要怎麼樣才可以在答案裡放圖片??
  • 可以在html模式底下寫語法,<img src="123">,或直接在一般模式下插汝圖片

    Dribs & Drabs 於 2015/08/10 16:44 回覆

  • Marco Jo
  • 若放在側邊攔,側邊欄一定要顯示。可是這樣部落格陽世就變好醜喔,有方法可以隱藏嗎?
  • 文章有說,還可以放在公告區塊跟頁尾描述喔!

    Dribs & Drabs 於 2015/08/14 15:32 回覆

  • Marco Jo
  • 我知道 但是因為這兩個地方都放東西了 :(
  • 放語法對版面不會有影響,放在哪裡效果都一樣,只要你記得這段語法是什麼就好了。公告區塊有寫東西的話,語法放在之後就可以了。

    Dribs & Drabs 於 2015/08/14 15:52 回覆

  • 悄悄話
  • Marco Jo
  • 謝謝你喔 我自己研究出來了 :)
  • :)

    Dribs & Drabs 於 2015/08/15 19:39 回覆

  • 悄悄話
  • Marco Jo
  • 謝謝你不厭其煩地回復:)
    真的很感謝你,
    今天我有查了一下hover跟before,
    但我發現此兩種為偽元素,查不到相關可以一起使用的文章,
    就大致上猜了一下(以下為我猜的結果,哈哈,果真失敗了)

    #QandA:hover{ /*滑鼠移至區塊變色*/
    background: #EECBAD;
    }
    #QandA:before{
    content: "▶";
    }
    </style>
  • 可以一起使用喔,例如
    #QandA:hover:before{...} 的意思是,當QandA被觸碰時,before要做甚麼反應

    Dribs & Drabs 於 2015/08/17 21:59 回覆

  • 悄悄話
  • 悄悄話
  • 千流風
  • 不好意思想請問Wei
    答案的部分是不是不能放圖片?
    測試過連結跟文內捲軸都有顯示
    唯獨圖片都沒出來
  • 我放過,可以喔!

    Dribs & Drabs 於 2015/09/18 15:57 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 小池野夏
  • 謝謝教學囉,用愛文章內超方便的
  • 不客氣,很開心有幫到你 :)

    Dribs & Drabs 於 2015/10/18 18:58 回覆

  • 悄悄話
  • 不二蘭
  • 我想請問一下~~
    這個可以開捲卓嗎?
  • 可以喔,不衝突!

    Dribs & Drabs 於 2015/12/05 22:20 回覆

  • 不二蘭
  • 真的沒有加"px",已經出來囉~
    謝謝~^^ 語法也帶走~
    (目前還沒弄好,所以還沒看到您的語法
  • 不客氣 :)

    Dribs & Drabs 於 2015/12/07 14:50 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話
  • 布仔
  • 很謝謝你這一篇的教學,這個真的很棒,我很喜歡!^_^
  • 不客氣 :D

    Dribs & Drabs 於 2016/07/21 08:35 回覆

  • 悄悄話
  • 悄悄話
  • HoneyAlice
  • 您好,我想請問一下要怎麼像您的QA一樣,上下寬度比較寬,我放文章都好細一條......

  • 你可以加入行距的設定,css屬性是 line-height

    Dribs & Drabs 於 2017/04/29 14:46 回覆

找更多相關文章與討論