1

На странице есть огромное количество каруселей (они симовлизируют покупки), каждый элемент карусели кликабельный и вызывает раздвигающийся блок с информацией под этой каруселью (этот блок я сделал один, информация в него подгружаться будет с помощью AJAX, почему он один? - потому что вынесен в обертку из карусели, т.к. у нее высота фиксированная из-за анимации при наведении, а мне необходимо, чтобы раздвигающийся блок толкал все остальные).

Изолировать карусели по отдельности у меня получилось, здесь ничего сложного не было.

  1. Теперь необходимо внутри самой карусели просто между элементами переносить класс активности, я знаю, что решение простое, но сам дойти до него не могу.
  2. Внутри самого раздвигающегося блока появилась

Мой js для этого:

$(document).ready(function () {

    var active = 'carousel-flights-item--active';


    //element-carousel
    $('.js-flights-info-trigger').click(function(){

            if ($(this).hasClass(active)) {

                $(this).removeClass(active);
                $(this).parents().children('.js-flights-info-slide').slideToggle();

            } else {

                $(this).addClass(active);
                $(this).parents().children('.js-flights-info-slide').slideToggle();

            }

        }
    );


    //inside
    $('.js-flights-info-trigger-slide-up').click(function(){

            if ($(this).parents().children('.carousel-flights-item').hasClass(active)) {

                $(this).parents().children('.carousel-flights-item').removeClass(active);
                $(this).parents().children('.js-flights-info-slide').slideToggle();

            } else {

                $(this).parents().children('.carousel-flights-item').addClass(active);
                $(this).parents().children('.js-flights-info-slide').slideToggle();

            }

        }
    );

});

Жду помощи, заранее спасибо! Если решение не элегантное, предлагайте другое!

1 ответ 1

1
$(document).ready(function () {
    var active = 'carousel-flights-item--active';

    var $triggerItems = $('.js-flights-info-trigger');
    var $infoSlideItems = $('.js-flights-info-slide');

    //element-carousel
    $triggerItems.click(function(){
        var isActive = $(this).hasClass(active);
        $triggerItems.removeClass(active);  
        $infoSlideItems.slideUp();

        if (!isActive) {
          $(this).addClass(active)
            .parents().children('.js-flights-info-slide')
            .stop(true, false)
            .slideDown();
        }
    });
});

Надеюсь я Вашу задачу правильно понял. Менял в js только блок $(document).ready.

3
  • Я думаю сегодня оформлю это все на jsfiddle, как до компьютера доберусь.
    – Jarvis
    19 апр 2016 в 7:51
  • Выложил на codepen codepen.io/anon/pen/bpjbBK
    – Jarvis
    21 апр 2016 в 11:20
  • Исправил свой ответ. 21 апр 2016 в 13:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.