0

我可以对这一点 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/

4

3 回答 3

1

您遇到的问题是在幻灯片切换后将 .readmore 锚附加到末尾，这会破坏 dom 遍历的功能

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

我已经分叉了你的小提琴，并向你展示了一种更简单的方法。现在您只需使用 CSS 定位“阅读更多”锚点

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

于 2013-01-25T16:04:54.200 回答
0

只是对 HighParkCoder 的回答稍作调整，但它更健壮，并且可以对每个博客项目的结构进行更改。相反，也更新该行：

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

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

JSF中：

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

于 2013-01-25T16:15:29.893 回答
-1

你几乎拥有它；只是一些调整。首先，重新排序您的 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/

于 2013-01-25T16:05:38.123 回答