JQuery自动多读和少读问题
我试图创建一个自动多读和少读,你只是在你的文本中的任何地方弹出一个窗口,并遇到了一个问题。现在它几乎可以工作了,但是如果你打开两个不同的Readmore,然后点击页面上的readless,关闭页面上的所有readlesses。有什么想法吗?下面是所有代码和注释JQuery自动多读和少读问题,jquery,click,nested,append,Jquery,Click,Nested,Append,我试图创建一个自动多读和少读,你只是在你的文本中的任何地方弹出一个窗口,并遇到了一个问题。现在它几乎可以工作了,但是如果你打开两个不同的Readmore,然后点击页面上的readless,关闭页面上的所有readlesses。有什么想法吗?下面是所有代码和注释 // Auto Readmore with a link that has the readmore class $(document).ready(function() { // Show Read more link that
// Auto Readmore with a link that has the readmore class
$(document).ready(function() {
// Show Read more link that is hidden by css
$('.readmore').show("fast");
// Loop through all .readmores
$('a.readmore').each(function(index) {
// Set the Node of the link
var currentreadmore = $(this);
// set the id to the index of the each
$(this).attr('id', 'readmore-' + index);
var node = currentreadmore[0];
if (node && node.nextSibling) {
// if not at the end of a paragraph remove the rest of the paragraph and append ...
var afternodecontent = node.nextSibling.nodeValue;
node.nextSibling.nodeValue = " ...";
}
// hide everything after the readmore link
$(this).parent().nextAll().hide();
// create click function to append the rest of the paragraph and show the content. Also hides the readmore button
$(this).click(function() {
// add the content back in
if (node && node.nextSibling) node.nextSibling.nodeValue = afternodecontent;
// hide the content
$(this).parent().nextAll().slideToggle("slow");
// hide the read more button
$(this).hide("slow");
// add the readless button
$(this).parent().nextAll().last().append('<p id="readless-' + index + '" class="readless-wrapper"><a href="#" class="readless">Read Less...</a></p>');
// hvea the readless button click work
$('.readless').click(function() {
// show the readmore info based off of the index of the button
$('#readmore-' + index).parent().nextAll().slideToggle("slow");
// show the read more
$('#readmore-' + index).show("slow");
// append the ... and hide the rest of the content
if (node && node.nextSibling) {
// if not at the end of a paragraph remove the rest of the paragraph and append ...
var afternodecontent = node.nextSibling.nodeValue;
node.nextSibling.nodeValue = " ...";
}
// remove the readless button
$('.readless-wrapper').remove();
// stop the href
return (false);
});
// stop the href from working
return (false);
}); // Close Click function
}); // Close Each Function
}); // Close document ready
你能发布一些HTML示例来说明这个问题吗?也许,还有一个?给你:正如你所看到的,如果我们有一个readmore链接,它工作得很好。但是如果你有两个,那么打开两个,它会变得非常混乱。