[已解决]请教：如何在mdx中实现文字折叠和展开

wonthen · 发表于 2016-12-1 11:16:17

本帖最后由 wonthen 于 2016-12-5 15:16 编辑

正在做一个简单的小词典，因为有一些说明性的文字，每个词条都有，全部显示很麻烦，也不够一目了然，所以希望这部分内容能在平时折叠，点击时才打开。
网上搜到一位朋友从OLAD8中抽出来的代码，奇怪的是我用了之后折叠的内容无法打开，请各位帮忙看看这段代码。
代码来自http://blog.sina.com.cn/s/blog_443a23b301012xle.html
OLAD8是本坛的https://www.pdawiki.com/forum/thread-7445-1-1.html

<span style='display:block;background-color:rgb(236,245,221);'><span style='display:block;font-variant:small-caps;font-size:smaller;font-weight:bold;background-color:white;color:rgb(247,143,030);'><div>显示例句（一）</div></span><div id="ID1" style="display:none;">例句内容（一）</div></span><BR>

复制代码

如果有问题，可以如何修改一下？谢谢各位指点。

lxchen2001 · 发表于 2016-12-1 13:03:48

需要加 js, 这段代码是折叠的用js 将 display:none改成display:block

wonthen · 发表于 2016-12-1 13:19:17

lxchen2001 发表于 2016-12-1 13:03
需要加 js, 这段代码是折叠的用js 将 display:none改成display:block

请问具体应该怎么加？在这方面是小白，完全不懂。非常感谢。

lxchen2001 · 发表于 2016-12-2 02:53:23

转发的新浪链接是属于比较繁琐的方式  没有好好利用CSS

之前发过一个帖子都是网上搜集来的可以参考一下  里面有好几个方式可以用
https://www.pdawiki.com/forum/thread-18321-1-1.html

还有种稍微复杂点的  https://www.pdawiki.com/forum/thread-18999-1-1.html

解开后你可以看看怎么实现的

wonthen · 发表于 2016-12-2 10:18:03

lxchen2001 发表于 2016-12-2 02:53
转发的新浪链接是属于比较繁琐的方式没有好好利用CSS

之前发过一个帖子都是网上搜集来的可以参考一 ...

非常感谢回复。我想对于会的人来说看了您给的几个例子应该就会明白怎么做了，不过遗憾我在这方面一窍不通，刚才看了您说的好几个方式，不知道怎么应用到文本当中去。下载100.mdx解开后研究了好半天也还是没有找过关键的地方，实在是“朽木不可雕也”，只能做“伸手党”，看看能否直接给上面的代码稍作修改，让我可以实现折叠和展开呢。

lxchen2001 · 发表于 2016-12-2 12:56:01

你发的那段码这么说吧半点用都没不是展开折叠用的关键

你想其他人帮你最好发一段你的资料描述一下什么地方想用这样才会有人可能帮到

wonthen · 发表于 2016-12-2 13:08:33

谢谢不厌其烦地解答，我发一个词条上来看看，不知道这样是否清楚。想要把<div id='ID1' style='display:block;'>到</div>的部分折叠到>▶ 이 부류에 속하는 어미들은 다음과 같다.这句话中，ID2、ID3等同理。再次感谢！

가다
<font color=red size=+1><b>가다</b></font><br>
【-고】 가고<br><span style='display:block;background-color:rgb(236,245,221);'><span style='display:block;font-variant:small-caps;font-size:smaller;font-weight:bold;background-color:white;color:rgb(247,143,030);'><div>▶ 이 부류에 속하는 어미들은 다음과 같다.</div></span><div id='ID1' style='display:block;'>-거나, -거늘, -거니, -거니와, -거든, -거들랑, -건, -건대, -건마는, -건만, -걸랑, -것다, -게, -게끔, -게나, -고, -고는, -고는, -고도, -고말고, -고서, -고야, -고자, -고지고, -곤, -관데, -구나, -구려, -구먼, -군, -기, -기로, -기로니, -기로서, -기로서니, -기로선들, -기에, -다, -다가, -다가는, -다간, -다고, -다나, -다네, -다느니, -다니, -다니까, -다마는, -다마다, -다만, -다며, -다면, -다면서, -다손, -다시피, -다오, -다지, -단, -단다, -담, -답니까, -답니다, -답시고, -대, -대요, -더구나, -더구려, -더구먼, -더군, -더냐, -더뇨, -더니, -더니마는, -더니만, -더라, -더라나, -더라니, -더라니까, -더라도, -더라며, -더라면, -더라면서, -더라손, -더라지, -더람, -던, -던가, -던감, -던걸, -던고, -던데, -던들, -던바, -던지, -데, -도다, -도록, -든, -든가, -든지, -듯, -듯이, -디, -자, -자고, -자꾸나, -자느니, -자니까, -자마자, -자며, -자면, -자면서, -자손, -죠, -지, -지마는, -지만, -지요</div></span>【-네】 가네<br><span style='display:block;background-color:rgb(236,245,221);'><span style='display:block;font-variant:small-caps;font-size:smaller;font-weight:bold;background-color:white;color:rgb(247,143,030);'><div>▶ 이 부류에 속하는 어미들은 다음과 같다.</div></span><div id='ID2' style='display:block;'>-ㄴ4, -나, -나니, -나이까, -나이다, -남, -네, -노니, -노라, -노라고, -노라니, -노라니까, -노라면, -누, -누나, -누먼, -느냐, -느냐고, -느뇨, -느니, -느니라, -느니만, -느니만치, -느니만큼, -느라, -는, -는가, -는감, -는걸, -는고, -는구나, -는구려, -는구먼, -는군<br>-사옵나이까, -사옵나이다, -사옵니까, -사옵니다, -사옵디까, -사옵디다, -사와, -사외다, -소, -소이까, -소이다, -쇠다</div></span>【-ㅂ니다/-습니다】 갑니다<br><span style='display:block;background-color:rgb(236,245,221);'><span style='display:block;font-variant:small-caps;font-size:smaller;font-weight:bold;background-color:white;color:rgb(247,143,030);'><div>▶ 이 부류에 속하는 어미들은 다음과 같다.</div></span><div id='ID3' style='display:block;'>-ㄴ다/-는다, -ㄴ다고/-는다고, -ㄴ다나/-는다나, -ㄴ다네/-는다네, -ㄴ다느니/-는다느니, -ㄴ다니/-는다니, -ㄴ다니까/-는다니까, -ㄴ다마는/-는다마는, -ㄴ다만/-는다만, -ㄴ다며/-는다며, -ㄴ다면/-는다면, -ㄴ다면서/-는다면서, -ㄴ다손/-는다손, -ㄴ다오/-는다오, -ㄴ다지/-는다지, -ㄴ단다/-는단다, -ㄴ담/-는담, -ㄴ답니까/-는답니까, -ㄴ답니다/-는답니다, -ㄴ답시고/-는답시고, -ㄴ대/-는대, -ㄴ대요/-는대요, -ㅂ네/-습네, -ㅂ니까/-습니까, -ㅂ니다/-습니다, -ㅂ디까/-습디까, -ㅂ디다/-습디다, -ㅂ죠/-습죠, -ㅂ지요/-습지요</div></span>【-아/어】 가<br><span style='display:block;background-color:rgb(236,245,221);'><span style='display:block;font-variant:small-caps;font-size:smaller;font-weight:bold;background-color:white;color:rgb(247,143,030);'><div>▶ 이 부류에 속하는 어미들은 다음과 같다.</div></span><div id='ID4' style='display:block;'>-아/-어, -아다/-어다, -아다가/-어다가, -아도/-어도, -아라/-어라, -아서/-어서, -아야/-어야, -아야만/-어야만, -아야지/-어야지, -아요/-어요, -았자/-었자 </div></span>【-면/-으면】 가면<br><span style='display:block;background-color:rgb(236,245,221);'><span style='display:block;font-variant:small-caps;font-size:smaller;font-weight:bold;background-color:white;color:rgb(247,143,030);'><div>▶ 이 부류에 속하는 어미들은 다음과 같다.</div></span><div id='ID5' style='display:block;'>-라/-으라, -라고/-으라고, -라나/-으라나, -라네/-으라네, -라느니/-으라느니, -라니/-으라니, -라니까/-으라니까, -라며/-으라며, -라면/-으라면, -라면서/-으라면서, -라지/-으라지, -락/-으락, -람/-으람, -랍니까/-으랍니까, -랍니다/-랍니다, -래/-으래, -래요/-으래요, -랴/-으랴, -러/-으러, -려/-으려, -려거든/-으려거든, -려고/-으려고, -려나/-으려나, -려니/-으려니, -려니와/-으려니와, -려든/-으려든, -려마/-으려마, -려면/-으려면, -려무나/-으려무나, -련/-으련, -련마는/-으련마는, -련만/-으련만, -렴/-으렴, -렵니까/-으렵니까, -렵니다/-으렵니다, -리까/-으리까, -리다/-으리다, -리만치/-으리만치, -리만큼/-으리만큼, -리오/-으리오, -매/-으매, -며/-으며, -면/-으면, -면서/-으면서, -므로/-으므로 </div></span>【-ㅁ/-음】 감<br><span style='display:block;background-color:rgb(236,245,221);'><span style='display:block;font-variant:small-caps;font-size:smaller;font-weight:bold;background-color:white;color:rgb(247,143,030);'><div>▶ 이 부류에 속하는 어미들은 다음과 같다.</div></span><div id='ID6' style='display:block;'>-ㅁ/-음, -ㅁ세/-음세, -ㅁ에도/-음에도, -ㅁ에랴/-음에랴</div></span>【-ㄴ/-은】 간<br><span style='display:block;background-color:rgb(236,245,221);'><span style='display:block;font-variant:small-caps;font-size:smaller;font-weight:bold;background-color:white;color:rgb(247,143,030);'><div>▶ 이 부류에 속하는 어미들은 다음과 같다.</div></span><div id='ID7' style='display:block;'>-ㄴ/-은, -ㄴ가/-은가, -ㄴ감/-은감, -ㄴ걸/-은걸, -ㄴ고/-은고, -ㄴ데/-은데, -ㄴ뎁쇼/-은뎁쇼, -ㄴ들/-은들, -ㄴ바/-은바, -ㄴ즉/-은즉, -ㄴ즉슨/-은즉슨, -ㄴ지/-은지, -ㄴ지라/-은지라, -나/-으나, -나마/-으나마, -냐/-으냐, -냐고/-으냐고, -냐고/-으냐고, -냐니까/-으냐니까, -뇨/-으뇨, -니/-으니(-니10/-으니4 제외), -니까/-으니까, -니까는/-으니까는, -니깐/-으니깐, -니만치/-으니만치, -니만큼/-으니만큼, -ㄹ/-을, -ㄹ거나/-을거나, -ㄹ걸/-을걸, -ㄹ게/-을게, -ㄹ까/-을까, -ㄹ깝쇼/-을깝쇼, -ㄹ꼬/-을꼬, -ㄹ는지/-을는지, -ㄹ데라니/-을데라니, -ㄹ라/-을라, -ㄹ라고/-을라고, -ㄹ라치면/-을라치면, -ㄹ락/-을락, -ㄹ래/-을래, -ㄹ러니/-을러니, -ㄹ런가/-을런가, -ㄹ레/-을레, -ㄹ레라/-을레라, -ㄹ망정/-을망정, -ㄹ밖에/-을밖에, -ㄹ뿐더러/-을뿐더러, -ㄹ사/-을사, -ㄹ새/-을새, -ㄹ세/-을세, -ㄹ세/-을세, -ㄹ세라/-을세라, -ㄹ세말이지/-을세말이지, -ㄹ수록/-을수록, -ㄹ시/-을시, -ㄹ시고/-을시고, -ㄹ쏘냐/-을쏘냐, -ㄹ쏜가/-을쏜가, -ㄹ작시면/-을작시면, -ㄹ지/-을지, -ㄹ지나/-을지나, -ㄹ지니/-을지니, -ㄹ지니라/-을지니라, -ㄹ지라/-을지라, -ㄹ지라도/-을지라도, -ㄹ지로다/-을지로다, -ㄹ지며/-을지며, -ㄹ지어다/-을지어다, -ㄹ지언정/-을지언정, -ㄹ진대/-을진대, -ㄹ진대는/-을진대는, -ㄹ진댄/-을진댄, -ㄹ진저/-을진저, -마/-으마, -ㅂ쇼/-읍쇼, -ㅂ시다/-읍시다, -ㅂ시사/-읍시사, -ㅂ시오/-읍시오, -사/-으사, -세/-으세, -세나/-으세나, -세요/-으세요, -셔요/-으셔요, -소서/-으소서, -시라/-으시라, -시어요/-으시어요, -십사/-으십사, -십시다/-으십시다, -십시오/-으십시오, -오/-으오, -옵니까/-으옵니까, -옵니다/-으옵니다, -옵디까/-으옵디까, -옵디다/-으옵디다, -옵소서/-으옵소서, -와/-으와, -우/-으우 </div></span>【-니10/-으니4】 가니
</>

复制代码

wonthen · 发表于 2016-12-2 13:15:55

本帖最后由 wonthen 于 2016-12-2 13:25 编辑

期待最终显示的效果：
가다（词条）
（释义内容）
가다（重复一遍词条）
【-고】 가고（接续1）
▶ 이 부류에 속하는 어미들은 다음과 같다.（这句话的意思是以下接续与此相同，希望以下内容能折叠进来，点击这句话展开以下内容，再点击收起）
-거나, -거늘, -거니, -거니와, -거든, -거들랑, -건, -건대.......

【-네】 가네（接续2）
▶ 이 부류에 속하는 어미들은 다음과 같다.（希望以下内容能折叠进来，点击这句话展开以下内容，再点击收起）
-ㄴ4, -나, -나니, -나이까, -나이다, -남, -네, -노니.........

..........

lxchen2001 · 发表于 2016-12-2 15:36:35

本帖最后由 lxchen2001 于 2016-12-2 16:40 编辑

应该可用没去打包但在浏览器中测试了一下改了前三个其他的自己看着改吧

工程量很大注意 div span 的位置调整了一下

现在的做法不会把颜色那些设定放在文档中而是用css去管理

wonthen · 发表于 2016-12-2 16:03:07

lxchen2001 发表于 2016-12-2 15:36
应该可用没去打包但在浏览器中测试了一下改了前三个其他的自己看着改吧

工程量很大注意 div spa ...

请告诉我应该怎么改。其实每个词条这个地方都是重复的，整个词典只要改7处应该就可以了，其他替换一下就行。

PurlingNayuki · 发表于 2016-12-2 17:27:31

展开和折叠的话考 JavaScript 修改 css 属性就可以做到了。用 a tag link 属性关联到 onClick 动作去处罚。

Oeasy · 发表于 2016-12-3 23:09:45

[索引] 切换隐藏 / 显示 https://pdawiki.com/forum/thread-15696-1-1.html

lxchen2001 · 发表于 2016-12-3 23:45:27

Oeasy 发表于 2016-12-3 23:09
[索引] 切换隐藏 / 显示 https://pdawiki.com/forum/thread-15696-1-1.html

只是为了这个功能装JQuery有点大材小用了

wonthen · 发表于 2016-12-5 08:58:52

谢谢各位尽心帮助。今天试着弄了一下，没做出来。对于js完全不懂，也不知道应该怎么做成mdx。可能用css来管理字体、格式什么的会更方便，不过自己不会做，也不希望多一个文件，最好还是就在一个mdx里，反正就是一个小词典而已。一路看下来似乎必须要js才能实现，想想还是算了，不折腾了。
我想我缺的不仅是js如何实现，还有js如何做到mdx里面去之类的非常基础的知识。
再次感谢各位。

sky66 · 发表于 2016-12-5 13:15:10

wonthen 发表于 2016-12-5 08:58
谢谢各位尽心帮助。今天试着弄了一下，没做出来。对于js完全不懂，也不知道应该怎么做成mdx。可能用css来管 ...

如果不希望多一个文件, 要将js写在一个mdx里.

使用emeditor, 找;
<div id='ID(.)' style='display:block;'>

取代为
<input type="button" value="折叠/展开" onclick="if(document.getElementById('id\1').style.display=='none'){document.getElementById('id\1').style.display = 'block';}else{document.getElementById('id\1').style.display='none'}" /><div id="id\1" style="display:none;">

效果如下, 仅使用上述词条来做测试, 不确定有无其他例外情况, ex: id10、id11...

wonthen · 发表于 2016-12-5 14:46:28

sky66 发表于 2016-12-5 13:15
如果不希望多一个文件, 要将js写在一个mdx里.

使用emeditor, 找;

太好了，完美解决了我的问题。其实我想要的就是这么简单。
所做的小词典放在我的分享贴里了https://www.pdawiki.com/forum/thread-16755-1-1.html
再次感谢！

[求助] [已解决]请教：如何在mdx中实现文字折叠和展开

/