作者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