通过单击或轻拍切换HTML文本
通过单击或轻拍切换HTML文本
提问于 2015-03-26 08:25:26
我正在设计一个网站，将显示长的文本块，其中经常包含笨拙，难以阅读的内部交叉引用文本的其他部分。例如，原文中的一段可能是这样说的：
“本文1,014章第(2)小节(a)项所讨论的有关现代艺术的...as。”
我想以更简洁的形式向读者介绍这篇文章，例如：
“1014(2)(a)章中讨论的关于现代艺术的...as。”
但我必须让用户选择在我的缩写版本和原始版本之间切换。我想通过让用户点击或点击特定的文本来实现这一点，这将在其缩写(默认情况下)和完整的原始版本之间切换。理想情况下，缩写的文本块将以这样的方式突出显示或勾勒出轮廓，以便向用户发出信号:为了可读性而压缩了较长的原始段落，但是可以点击/轻击来展开。
有没有人能建议我如何编写这样的程序？它应该/可以用HTML、CSS、jQuery、JavaScript或其他语言来完成吗？
(为了清楚起见，我不需要自动将原始文本转换为简短形式的算法；我可以在每种情况下手动识别和键入简短形式。)
谢谢!
回答 4
Stack Overflow用户
发布于 2015-03-26 08:34:25
https://jsfiddle.net/1gLv5qyv/
使用
$(".text-toggle").click(function(){
$(".toggleAble").toggle();
});使用JQuery插件。
Stack Overflow用户
发布于 2015-03-26 08:36:31
您可以使用属性display:none创建一个css类，为文本提供id，并使用jquery方法切换类
Stack Overflow用户
发布于 2015-03-26 08:37:07
使用jQuery、CSS和vanilla JS可以做到这一点。
HTML：
<p class="original">you original text</p>
<p class="secondary">secondary text</p>CSS：
.secondary { display:none; }jQuery：
jQuery('.original').click(function(){
jQuery(this).hide();
jQuery('.secondary').show();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29269011
复制相关文章
相似问题