jquery 选项卡、 slider 和阅读更多链接——阅读更多仅在第一篇文章上工作

Question

@roXon 解决了这个问题。如果您有兴趣使用它，请参阅下面他的回复。

我正在为我的每篇文章使用 jquery 的“选项卡”和“阅读更多”功能，但阅读更多功能没有发挥应有的作用。 “阅读更多”并未扩展到我的每篇文章，它仅适用于第一篇(顶部)文章。

演示:http://fiddle.jshell.net/evanmoore/yNC9G/1/show/

fiddle :http://jsfiddle.net/evanmoore/yNC9G/1/

Answer 1

DEMO

用过:

$(this).parent().prev('.wrap').animate({

你有一个额外的逗号和一些小错误。

我做了什么让它工作: 在顶部，我为您的 .wrap 创建了一个 each 方法 - 将每个 .wrap 高度存储到 .data() 中。

$(function(){
    $('#postsBig .wrap').each(function(){
        var wraph = $(this).height();
        $(this).data('h',wraph);
    });
});

然后我隔离了检查 .wrap 是否需要“页脚”的脚本 if 阅读更多内容。

$('.wrap').each(function(){
    var wrap = $(this);
    var wraph = wrap.data('h');
    if(wraph >= slideHeight){
        wrap.height(slideHeight);
        wrap.next('.read-more').append('<a href="#">Click to Read More</a>');
    }
});

比起我刚刚编辑了一些你的代码来触发好的元素并为正确的 .wrap 元素搜索合适的 .data 高度:

$('.read-more a').click(function(){
    var defHeight = $(this).parent().prev('.wrap').data('h');
    var curHeight = $(this).parent().prev('.wrap').height();
    if(curHeight <= slideHeight){
        $(this).parent().prev('.wrap').animate({
          height: defHeight
        }, 500);
        $(this).html('Close');
    }else{
        $(this).parent().prev('.wrap').animate({
          height: slideHeight
        }, 500);
        $(this).html('Click to Read More');
    }
    return false;
});