jquery 选项卡、滑块和阅读更多链接——阅读更多仅在第一篇文章中工作答案

【问题标题】：jquery tabs, slider and read more link -- read more only working on the first articlejquery 选项卡、滑块和阅读更多链接——阅读更多仅在第一篇文章中工作
【发布时间】：2011-11-19 12:22:18
【问题描述】：

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

我对我的每篇文章都使用了 jquery 的“标签”和“阅读更多”功能，但阅读更多功能并没有发挥应有的作用。 “阅读更多”并没有扩展到我的每篇文章，它只适用于第一篇（顶部）文章。

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

小提琴：http://jsfiddle.net/evanmoore/yNC9G/1/

【问题讨论】：

标签： jquery css tabs pagination slideshow

【解决方案1】：

好像tab不活动的时候，里面.wrap的高度是0。

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

我想看看如果只展开单击阅读更多内容的幻灯片而不将原始高度存储在数据对象中会是什么样子。这是我想出的：

这是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();
})

【讨论】：

【解决方案2】：

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 是否需要让“页脚”阅读更多内容。

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

【讨论】：

我现在还在解决一个高度问题！我会尽快发布小提琴。谢谢。
我注意到了。哇！谢谢。我注意到高度只适应第一篇文章的高度。再次，谢谢。
太棒了。这是完美的。你明白了，伙计！：）非常感谢。现在，成功了！感激不尽！:)
哦...好的！很高兴它有帮助！干杯!快乐编码！再见

【解决方案3】：

您正在对一类元素调用 .height()，因此它将返回第一个匹配项的高度。这不是你想要的。您还在类选择器上调用动画，而不是在元素上。

【讨论】：

【解决方案4】：

尝试改变

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

到

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

【讨论】：