[已解决]请教：如何在mdx中实现文字折叠和展开
本帖最后由 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>
如果有问题，可以如何修改一下？谢谢各位指点。 需要加 js, 这段代码是折叠的 用js 将 display:none改成display:block lxchen2001 发表于 2016-12-1 13:03
需要加 js, 这段代码是折叠的 用js 将 display:none改成display:block
请问具体应该怎么加？在这方面是小白，完全不懂。非常感谢。 转发的新浪链接是属于比较繁琐的方式没有好好利用CSS
之前发过一个帖子 都是网上搜集来的 可以参考一下里面有好几个方式可以用
https://www.pdawiki.com/forum/thread-18321-1-1.html
还有种稍微复杂点的https://www.pdawiki.com/forum/thread-18999-1-1.html
解开后 你可以看看怎么实现的 lxchen2001 发表于 2016-12-2 02:53
转发的新浪链接是属于比较繁琐的方式没有好好利用CSS
之前发过一个帖子 都是网上搜集来的 可以参考一 ...
非常感谢回复。我想对于会的人来说看了您给的几个例子应该就会明白怎么做了，不过遗憾我在这方面一窍不通，刚才看了您说的好几个方式，不知道怎么应用到文本当中去。下载100.mdx解开后研究了好半天也还是没有找过关键的地方，实在是“朽木不可雕也”，只能做“伸手党”，看看能否直接给上面的代码稍作修改，让我可以实现折叠和展开呢。 你发的那段码这么说吧 半点用都没 不是展开折叠用的关键
你想其他人帮你 最好发一段你的资料 描述一下什么地方想用 这样才会有人可能帮到
/
谢谢不厌其烦地解答，我发一个词条上来看看，不知道这样是否清楚。想要把<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:25 编辑
期待最终显示的效果：
가다（词条）
（释义内容）
가다（重复一遍词条）
【-고】 가고（接续1）
▶ 이 부류에 속하는 어미들은 다음과 같다.（这句话的意思是以下接续与此相同，希望以下内容能折叠进来，点击这句话展开以下内容，再点击收起）
-거나, -거늘, -거니, -거니와, -거든, -거들랑, -건, -건대.......
【-네】 가네（接续2）
▶ 이 부류에 속하는 어미들은 다음과 같다.（希望以下内容能折叠进来，点击这句话展开以下内容，再点击收起）
-ㄴ4, -나, -나니, -나이까, -나이다, -남, -네, -노니.........
.......... 本帖最后由 lxchen2001 于 2016-12-2 16:40 编辑
应该可用没去打包 但在浏览器中测试了一下 改了前三个其他的自己看着改吧
工程量很大注意 div span 的位置 调整了一下
现在的做法不会把颜色那些设定放在文档中 而是用css去管理 lxchen2001 发表于 2016-12-2 15:36
应该可用没去打包 但在浏览器中测试了一下 改了前三个其他的自己看着改吧
工程量很大注意 div spa ...
请告诉我应该怎么改。其实每个词条这个地方都是重复的，整个词典只要改7处应该就可以了，其他替换一下就行。 展开和折叠的话考 JavaScript 修改 css 属性就可以做到了。用 a tag link 属性关联到 onClick 动作去处罚。
[索引] 切换 隐藏 / 显示 https://pdawiki.com/forum/thread-15696-1-1.html
Oeasy 发表于 2016-12-3 23:09
[索引] 切换 隐藏 / 显示 https://pdawiki.com/forum/thread-15696-1-1.html
只是为了这个功能装JQuery有点大材小用了{:4_91:} 谢谢各位尽心帮助。今天试着弄了一下，没做出来。对于js完全不懂，也不知道应该怎么做成mdx。可能用css来管理字体、格式什么的会更方便，不过自己不会做，也不希望多一个文件，最好还是就在一个mdx里，反正就是一个小词典而已。一路看下来似乎必须要js才能实现，想想还是算了，不折腾了。
我想我缺的不仅是js如何实现，还有js如何做到mdx里面去之类的非常基础的知识。
再次感谢各位。 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... sky66 发表于 2016-12-5 13:15
如果不希望多一个文件, 要将js写在一个mdx里.
使用emeditor, 找;
太好了，完美解决了我的问题。其实我想要的就是这么简单。
所做的小词典放在我的分享贴里了https://www.pdawiki.com/forum/thread-16755-1-1.html
再次感谢！
页:
[1]