javascript 如何在单击“阅读更多”按钮或链接时展开文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27646284/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to expand the text on clicking the read more button or link?
提问by Muhammad Kamran
I have a js function which toggles between two spans of texts. One is smaller text with class collapsed and the other is full text with class expanded.
我有一个 js 函数，可以在两个文本跨度之间切换。一种是类折叠的较小文本，另一种是类展开的全文。
here is my js
这是我的 js
$(document).ready(function() {
$(".expanded").hide();
$(".expanded, .collapsed").click(function() {
$(this).parent().children(".expanded, .collapsed").toggle();
});
});
and my html look like this
我的 html 看起来像这样
<span class="collapsed">
some small text
<a href="javascript:void(0)"> READ MORE>></a>
</span>
<span class="expanded">
here come the full text to replace the small text
<a href="javascript:void(0)">Less>></a>
</span>
The preset function replaces the text of one part with another. My problem is that when we click on any part of any span either collapsed or expanded, the text is changed. I want to restrict it to change the text only when one click the READ MORE>> or Less>> link. I have gone so far in this design that I cant change the function now. I want changes while staying the in present function. Any ideas??
预设功能将一个部分的文本替换为另一个部分。我的问题是，当我们单击折叠或展开的任何跨度的任何部分时，文本会更改。我想限制它仅在单击“阅读更多>>”或“更少>>”链接时更改文本。我已经在这个设计中走得太远了，我现在不能改变这个功能。我希望在保持现有功能的同时进行更改。有任何想法吗？？
回答by Khawer Zeshan
回答by acontell
$(document).ready(function() {
$(".expanded").hide();
$(".expanded a, .collapsed a").click(function(eve) {
eve.preventDefault();
$(".expanded, .collapsed").toggle();
});
});
UPDATE
更新
To solve the problem related to the posts.
解决与帖子相关的问题。
$(document).ready(function() {
$(".expanded").hide();
$(".expanded a, .collapsed a").click(function(eve) {
var $container = $(this).parents("div");
eve.preventDefault();
$container.children(".expanded, .collapsed").toggle();
});
});
Note that this code takes for granted that the spans are contained in a div (change if otherwise).
请注意，此代码理所当然地认为跨度包含在 div 中（否则更改）。
Hope that helps or at least gives you some ideas.
希望对您有所帮助或至少给您一些想法。
Kind regards.
亲切的问候。
回答by Mehul patel
Use this jQuery snippet to dig this issue
使用这个 jQuery 片段来挖掘这个问题
jQuery(document).ready(function() {
jQuery(".expanded").hide();
jQuery(".collapsed a").click(function() {
jQuery(this).hide();
jQuery(".expanded").slideDown();
});
jQuery(".expanded a").click(function(){
jQuery(".expanded").slideUp();
jQuery(".collapsed a").show();
});
});
回答by Billy
How about this ? this will work on classes and is expandable.
这个怎么样 ？这将适用于类并且是可扩展的。
$(".expanded a, .collapsed a").click(function() {
$(this).parent().children(".expanded, .collapsed").toggle();
});