jQuery slideToggle

 

#程式語言、#Blogger文章放入錨點或文章收合

 上一篇整理了 CSS Block 的用法，這一篇整理另一個 slideToggle 的功能。
<<jQuery Slide DIV Content from Left to Right or  Right to Left @ ASP.NET>>
<<jQuery slideToggle / slideUp / slideDown Example @ Web Code Geeks>>

<20160908<在Blogger裡用jQuery做展開/收合的效果 @ Coding Notes>>
<<jQuery 效果 - slideToggle() 方法@ W3School>>
若要預設為隱藏，則在 div class="hide_parag" 加入display:none;
▊code如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
  $(".hide_parag").slideToggle();
  });
});
</script>
<button class="btn1">xxx主題　　　　(按此展開/收合)　</button>
<div class="hide_parag" style="border-style: solid; border-width: 1px; display:none;">
這段是有關xxx的主題，不需要用到xxx的話可以按上方按鈕把這段收合起來</div>

▊效果如下：

這段是有關xxx的主題，不需要用到xxx的話可以按上方按鈕把這段收合起來

另外一個功能 anchor(錨點)，適用於長篇的文章內容、讓人快速找到相關段落。
<20090102<MozTW 討論區 • 檢視主題 - 書籤語法要怎麼寫？>>
▊code如下：

<a href="#ID">超連結文字</a><div id="ID"></div>

元素要先有 name 或 id 其中一種屬性，並給予適當格式的值（名稱），才能用頁內定錨還啥的連結方式。
ID 開頭不可以用數字（符號不確定），而且同一個網頁檔案中，一個 ID 名稱（大小寫視作不同的）只能出來一次，不然這連向這個頁內定錨的超連結會不知道該去哪。另外也可以跨文件連結。
▊code如下：

<a href="網頁網址#chapter1">第一章</a>, <a href="網頁網址#chapter2">第二章</a>
<h2 id="chapter1">第一章</h2>
<p>這是一段文不拉不拉不拉...</p>
<h2 id="chapter2">第二章</h2>
<p>這是一段文不拉不拉不拉...</p>

▊效果如下：

第一章, 第二章

第一章
這是一段文不拉不拉不拉...



第二章
這是一段文不拉不拉不拉...

Q：〈h2〉 功能跟 〈div〉一樣嗎？
A：h2 是 headings(大標) 元素中的第二階級，div 是 block-level(區塊層級) 元素，雖然 CSS 顯示效果一樣，但兩者在文件中的用途不同，最好學一下何時要用哪個比較好，不然寫出來的網頁會有些缺點。〔詳情可見：元素的分类与标识（class和id）@ chitutorial - HTML.net〕

<20071009<玩Web無窮(Enjoy Web Tech): HTML基礎教學(5)--超連結與錨點>>
▊code如下：

<A HREF="網頁網址#section_3">捲動到section 3</A>
<BR><BR><BR><BR><BR><BR><BR><BR><A NAME="section_3">錨點所在(這裡不見得要有文字)</A>

▊效果如下：

捲動到section 3





錨點所在(這裡不見得要有文字)