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

时间:2011-09-18 01:48:19

标签: jquery css tabs pagination slideshow

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

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

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

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

4 个答案:

答案 0 :(得分: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是否需要让'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;
});

答案 1 :(得分:0)

尝试更改

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

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

似乎当标签未激活时,.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();
})