Question

我可以使用这个jQuery的一些指导。这似乎是一个热门话题，到目前为止，我在单击时更改了/读取更少的文本，并且单个实例在页面上有多个实例的情况下单独工作。

我现在需要做的是将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定位“阅读更多”锚点

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

Answer 2

稍微调整一下HighParkCoder的答案，但它更加强大，并且能够对每个博客项目的结构进行更改。相反，也要更新该行：

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

在代码中多次引用它也值得缓存$(this)。总是值得习惯于保持你的代码更通用，这样如果你决定改变你的博客项目的结构，javascript与工作。使用.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/

jQuery Read More / Read Less仅在Read Less状态的全文后附加

3 个答案: