javascript 展开阅读更多的 jQuery 代码是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9403874/
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
What is the jQuery code to Expand a Read More?
提问by Ibanez
I would like to have many paragraphs on a single page. Each paragraph is for a different author with a read more. If they click on the read more or within the paragraph I would like to hide/fade all the other paragraphs out and expand the one they clicked on.
我想在一个页面上有很多段落。每个段落是为不同的作者阅读的。如果他们点击阅读更多或在段落内，我想隐藏/淡出所有其他段落并展开他们点击的段落。
What is the jQuery code for doing something like this?
执行此类操作的 jQuery 代码是什么？
Thanks for any help.
谢谢你的帮助。
回答by Ken Redler
Here's a way to do it without adding any markup to your paragraphs.
这是一种无需在段落中添加任何标记的方法。
The HTML:
HTML：
?<div id="content">
<p>content_here</p>
<p>content_here</p>
<p>content_here</p>
<p>content_here</p>
?</div>???????
And you'll want some css like this:
你会想要一些这样的 css：
.dorsal { display: none; }
Next, the JavaScript:
接下来，JavaScript：
?$('#content').find('p').html( function(){ // for every paragraph in container
var exposer = '<a href="#" class="expose">More...</a>', // link to insert
content = $(this).html().split(''),
cutLength = 50, // choose the cutoff point
anterior = content.slice( 0,cutLength ).join(''),
dorsal = content.slice( cutLength ).join(''),
joined =
anterior
+ exposer
+ '<span class="dorsal">'
+ dorsal
+ '</span>'; // assemble the new contents
return joined;
})
.on('click','.expose',function(e){
e.preventDefault();
var $thisp = $(this).closest('p');
$('#content').find('p').not( $thisp ).hide(); // hide others
$thisp // for the enclosing paragraph
.find('.dorsal') // select the hidden piece
.show() // show it
.end() // back to the paragraph
.find('.expose') // find the "show more" link
.hide(); // hide it
});??????????????????????????????????????????????????
You'll need this in your $(document).ready()handler.
您将需要在您的$(document).ready()处理程序中使用它。
As others point out, there are many plugins to do this kind of thing. Sometimes it's useful to work it out yourself, though.
正如其他人指出的那样，有很多插件可以做这种事情。不过，有时自己解决是有用的。
Re-collapsing and exposing the original paragraphs is left as an exercise.
重新折叠和暴露原始段落留作练习。
Here's an example: http://jsfiddle.net/redler/wAY8g/1/
这是一个例子：http: //jsfiddle.net/redler/wAY8g/1/
Updatedto support multiple paragraph groups, per Ibanez's comment:
根据 Ibanez 的评论，更新以支持多个段落组：
$('#content').find('div').prepend(function() {
var exposer = '<a href="#" class="expose">More...</a>',
rawcontent = $(this).text(),
cutLength = 100,
abstract = rawcontent.split('').slice(0, cutLength).join(''),
abbreviated = '<span class="abstract">' + abstract + exposer + '</span>';
return abbreviated;
}).end().on('click', '.expose', function(e) {
e.preventDefault();
var $thisgroup = $(this).closest('div');
$('#content').children('div').not($thisgroup).hide(); // hide others
$thisgroup
.find('p').show()
.parent()
.append('<a href="#" class="showall">Show all</a>')
.end()
.closest('div').find('.abstract').hide();
}).on('click', '.showall', function() {
$(this).remove();
$('#content').find('div').show().end()
.find('p:visible').hide().end()
.find('.abstract').show();
});?
For this to work, we now start with all paragraphs hidden via css, and the script builds and displays the abstracts on load. Also updated to provide links to re-show the original state.
为此，我们现在从通过 css 隐藏的所有段落开始，脚本构建并在加载时显示摘要。还更新提供链接以重新显示原始状态。
Example: http://jsfiddle.net/ZRB92/1/
回答by dragon
Let this plugin handle the hard part for you:
让这个插件为您处理困难的部分：
回答by Lennart
<div id="sample_1">
paragraph sample
<br><a href="javascript: void(0)" onClick="hide_all_pars('par_1')">read more</a>
<div id="par_1" style="display: none;">
Whole paragraph
</div>
</div>
<div id="sample_2">
paragraph sample 2
<br><a href="javascript: void(0)" onClick="hide_all_pars('par_2')">read more</a>
<div id="par_2" style="display: none;">
Whole paragraph 2
</div>
</div>
Javascript:
Javascript：
<script type="text/javascript">
function hide_all_pars(par){
var i=0;
for(i=0;i<=2;i++){
$('#par_'+i).fadeOut('slow');
}
$('#'+par).fadeIn('slow');
}
</script>
the 2 in the for loop would be replaced with how many parahgraphs you have
for 循环中的 2 将被替换为您拥有的段落数
