作者robenten (:)
看板Web_Design
標題[問題] 如何將文章展開或折疊?
時間Thu Dec 12 21:46:06 2013
各位高手好, 為了節省空間小弟想要創造一個按鈕可以把文章內容展開或折疊有點類
似下拉式表單, 但是展開的是文章或圖片
舉codecademy網站為例:
http://goo.gl/K7lWjy (可能需使用瀏覽器打開)
左邊的視窗最下方有一個按鈕"Stuck?Get a hint" , 按下後會展開文章
有可能使用Javascript辦到, 或是html、CSS有相關的功能?
初學javascript希望各位能幫忙解惑, 謝謝
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 36.228.237.217
2F：→ mmis1000:可以用jquery插件簡單達到，或自己刻 12/12 21:56
3F：→ mmis1000:搜尋 spoiler javascript 可以找到一堆 12/12 21:57
4F：→ mmis1000:原理是把要摺疊的文章裝在容器裡面，然後把切換的開關掛 12/12 22:01
5F：→ mmis1000:在別的物件上面，最後把容器設成預設隱藏 12/12 22:01
6F：→ robenten:恩 我研究看看 非常謝謝您 12/12 22:13
7F：推 mmis1000:加了些註解上去，應該會比較好理解運作方式 12/13 04:04
8F：→ robenten:好清楚 謝謝您 :) 12/13 10:47
9F：→ robenten:我試著用javascript做出spoiler的效果 12/14 00:29
11F：→ robenten:用記事本存成.html檔可以成功 不過在JSFiddle不行 12/14 00:31
13F：→ mmis1000:不成功是因為呼叫順序的問題，把onload改nowrap應該就行 12/14 01:03
14F：→ mmis1000:但現在已經不推薦把js寫在html中了，因為會增加維護的困 12/14 01:04
15F：→ mmis1000:難，而且每次都搜索dom的話，在網頁太大時，效率會很差 12/14 01:06
16F：→ mmis1000:一開始我也試圖這樣寫過，但我發現為每一個要摺疊的區塊 12/14 01:25
17F：→ mmis1000:寫一個函數實在有點蠢，而且這樣寫，使用上也比較方便 12/14 01:26
18F：→ mmis1000:只要把css的class標為spoiler，它就會自動加上按鈕了 12/14 01:26
19F：→ mmis1000:不用去管id之類的東西 12/14 01:27
20F：→ robenten:能請問 onload跟nowrap差在哪裡嗎? 12/14 18:16
21F：→ robenten:每一個區塊都寫一個函數確實是自找麻煩,當初沒想到這一點 12/14 18:18
22F：→ mmis1000:onload是指在頁面讀取完之後，nowrap in head在讀取之前 12/14 21:25
23F：→ mmis1000:家在元素的onclick中的的函數的運作方式是 12/14 21:26
24F：→ mmis1000:獨到那行時，依照給的變數名，將函數加入事件處理中 12/14 21:27
25F：→ mmis1000:但onload是發生在頁面完成後，所以要讀取時，當然找不到 12/14 21:28
26F：→ mmis1000:所以最後按鈕會沒反應 12/14 21:29
27F：→ robenten:嗯嗯 瞭解 謝謝您詳細的解說 :) 12/15 16:13