jQuery Read More/Read Less附加在全文之后，仅用于表示Read Less状态

Question

对于这个jQuery，我可能需要一些指导。这似乎是一个流行的话题，到目前为止，我已经在单击时更改了Read more/read less文本，并且单个实例在页面上有多个实例的情况下独立工作。

我现在需要做的是在全文的末尾添加Read Less。我现在可以正常工作，但是toggleSlide (向上滑动)也因此中断了。

我现在正在学习jQuery (我喜欢它！)因此，任何帮助都将不胜感激。

代码如下：

$(document).ready(function() {
$('.fulltext').hide();

    $('.blog-item .readmore').click(function(event) {
     event.preventDefault();
        $(this).parent().nextAll('.fulltext').first().slideToggle('slow');
        $(this).text($(this).text() == 'Read less...' ? 'Read more...' : 'Read less...');
        $(this).appendTo($('.fulltext'));
    });            
});

http://jsfiddle.net/Techbot/AuAKn/

Answer 1

您遇到的问题是在滑动切换之后将.readmore锚点附加到末尾，这破坏了dom遍历的功能。

    $(this).parent().nextAll('.fulltext').first().slideToggle('slow');

我用叉子叉了你的小提琴，给你看了一种更简单的方法。现在你只需要用CSS定位"read more“锚点

http://jsfiddle.net/AcQ6s/2/

Answer 2

只是对HighParkCoder的答案做了一点微调，但它更健壮，而且能经得起每个博客项目结构的改变。相反，也要更新这一行：

$(this).closest('.blog-item').find('.fulltext').slideToggle('slow');

缓存$(this)也是值得的，因为您在代码中多次引用它。保持你的代码更通用总是值得的，这样如果你决定改变你的博客项目的结构，javascript with work。使用.parent()与博客项目的当前结构更紧密地联系在一起。

JSFiddle：

http://jsfiddle.net/D7a6E/3/

Answer 3

您几乎可以做到这一点；只需进行一些调整。首先，重新排序您的HTML：

<div class="blog-item">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at urna ac
        leo vulputate egestas a ut odio. In hac habitasse platea dictumst. Donec
        in erat velit, eu ultricies diam.

    <div class="fulltext">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at urna ac
            leo vulputate egestas a ut odio. In hac habitasse platea dictumst.</p>
    </div>
    <a class="readmore" href="#">Read more...</a>
    </p>
</div>

然后，只需在单击时切换文本：

$(document).ready(function () {
    $('.fulltext').hide();

    $('.blog-item .readmore').click(function (event) {
        event.preventDefault();
        $('.fulltext').slideToggle('slow');
        $(this).text($(this).text() == 'Read less...' ? 'Read more...' : 'Read less...');
    });
});

这应该能起到作用！这里有一个小提琴：

http://jsfiddle.net/sablefoste/AuAKn/1/