貓城
BLACKCAT CASTLE

伸縮式Q&A程式碼《CSS、Html、jQuery》

   50 VIEWS
伸縮式Q&A程式碼《CSS、Html、jQuery》

歡迎來到黑貓城,我是時雨の町站長 ─ 時雨。

範例

問題A

回答A

問題B

回答B

CSS

<style type="text/css">
.Question{
width: 100%;
border-bottom: 1px #aaa dotted;
}
.Question:hover::before {
width: 98%;
padding: 0px 5px 0px 10px;
color: #508d91;
content:'➤';
}
.Answer{
display: none;
width: 98%;
padding: 0px 10px 10px 10px;
border-bottom: 1px #aaa dotted;
color: #419384;
}
.Answer p{
padding: 0px 10px 10px 10px;
}
</style>

jQuery

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

Html

<p class="Question">標題(問題A)</p>
<div class="Answer">內文(回答A)</div>
<p class="Question">標題(問題B)</p>
<div class="Answer">內文(回答B)</div>


說明

如果是免費平台的部落格,可以將上述都寫在同一頁,也就是直接在編輯器上全數貼上,缺點是每次使用都要貼上,如果想要只寫一次就把 CSS 寫在後台的 CSS 樣式表,jQuery 寫在自訂欄位(依照各家不同的配置請自行研究怎麼自訂欄位),然後每次新增時只要在編輯器上寫 Html 的部分即可。

如果是完全自架站(就是網頁都是自己寫的),那就把 CSS 的部分寫在 CSS 檔或直接在 HTML 上引用,上述的 CSS 程式碼是用於直接在 HTML 上引用的,如果寫在 CSS 檔就不需要用<style type="text/css"> </script>包起來,這部分應該會寫網頁的都知道,就不再贅述了。而 jQuery 寫在全站引用的<body>之間即可,HTML 就在編輯器上新增即可。




時雨 時雨,時雨の町-日文學習園地站長,為了紀錄網站維護的日誌而架設本網站,並以家中黑貓命名為黑貓城,順道分享各種架站知識與相關的網頁程式語言,如果你喜歡我的文章,請幫我按讚哦(*´ω`*)。也歡迎各位到我的日語教學網站學習日文 :)

LEAVE A REPLY

COMMENTS