[問題] 如何將文章展開或折疊?

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