JQuery вкладки, слайдер и ссылку «читать дальше» - читать дальше, работая только над первой статьей

Question

@ roXon решил это. Смотрите его ответ ниже, если вы заинтересованы в использовании этого.

Я использую «вкладки» jquery плюс функциональность «читать больше» для каждой из моих статей, но программа «Читать больше» не работает должным образом. «Читать дальше» не распространяется на каждую из моих статей, оно работает только над первой (верхней) статьей.

Демо: http://fiddle.jshell.net/evanmoore/yNC9G/1/show/

Скрипка: http://jsfiddle.net/evanmoore/yNC9G/1/

Answer 1

DEMO

используется:

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

У вас есть лишняя запятая и несколько небольших ошибок.

Чтоя сделал, чтобы заставить его работать: сверху я создал each метод для вашего .wrap - для сохранения в .data() каждой .wrap высоты.

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

Чем я немного отредактировал ваши коды, чтобы получить хороший элемент для запуска и поиска правильной высоты .data дляправый элемент .wrap:

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

Кажется, что когда вкладка не активна, высота .wrap внутри равна 0.

Конечно, roXon опубликовал отличное решение, которое хранит высоту под нагрузкой и будет изменять ссылку для чтения для всех слайдов. И это может быть предполагаемым эффектом. Я хотел бы отметить, что, возможно, было бы лучше поместить div-read-more вне слайдов, потому что вы выполняете их все, и каждый раз они будут иметь одинаковое значение.

Я хотел посмотреть, на что это похоже, если развернуть только слайд, на котором нажата дополнительная информация, без сохранения исходной высоты в объекте данных. Вот что я придумал:

Вот скрипка

Сначала 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();
})

Answer 3

Вы вызываете .height () для класса элементов, поэтому он вернет высоту первого совпадения. Это не то, что вы хотите. Вы также вызываете animate в селекторе классов, а не в элементе.

Answer 4

Попробуйте изменить

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

на

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