Question

@roXon解决了这个问题。如果您对使用此功能感兴趣，请参阅下面的回复。

我正在为每篇文章使用jquery的'tabs'以及'read more'功能，但是阅读更多的功能并没有正常运行。 “阅读更多”并未扩展到我的每篇文章，它仅适用于第一篇（顶部）文章。

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

小提琴：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);
    });
});

我隔离了脚本if，它检查.wrap是否需要让'footer'更多阅读。

$('.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;
});

Answer 2

尝试更改

$('.read-more a').click(function(){

到

$('.read-more a').live("click", function(){

Answer 3

你在一类元素上调用.height（），所以它将返回第一个匹配的高度。这不是你想要的。您还在类选择器上调用动画，而不是在元素上。

Answer 4

似乎当标签未激活时，.wrap内部的高度为0。

当然，roXon发布了一个很好的解决方案，可以在加载时存储高度，并且可以为所有幻灯片更改读取链接。这可能是预期的效果。我想指出，在幻灯片之外放置read-more div可能会更好，因为你影响了所有这些并且它们每次都会是相同的值。

我想看看仅扩展单击read-more的幻灯片而不将数据对象中的原始高度存储起来会是什么样子。这就是我想出的：

这是fiddle

首先，css：

.wrap {
    position: relative;
    padding: 10px;
    overflow: hidden;
    min-height: 120px;
}

然后，js：

$(document).ready(function() {
     $(".pagination").tabs(".slides li", {
    event: 'mouseover',
     rotate: true,
        }).slideshow({
            clickable: false,
            autoplay: false,
            interval: 4000 // in milliseconds 4000 = 4 seconds
        });

    var closedSlideHeight = 120; // px

    $('.slides .read-more').click(function() {
        var $readMore = $(this),
            $wrap = $readMore.siblings('.wrap');

        var fullHeight = function() {
            var totalHeight = 0;
            $wrap.children().each(function() {
                totalHeight += parseInt($(this).outerHeight(true));
            }); 

            return totalHeight.toString() + "px";
        };

        var isClosed = function() {
            return (closedSlideHeight >= parseInt($wrap.height()) && !($wrap.height() == 0));
        };

        var closeWrap = function() {
            $wrap.animate({'height': (closedSlideHeight.toString() + "px")});
            $readMore.html('<a href="#">Click to Read More</a>');
        };

        var openWrap = function() {
            $wrap.animate({'height': fullHeight() });  
            $readMore.html('<a href="#">Close</a>');
        };

        if (isClosed()) {
            openWrap();
        } else {
            closeWrap();
        }
    }).click();
})

jquery选项卡，滑块和阅读更多链接 - 阅读更多内容仅适用于第一篇文章

4 个答案:

DEMO