Как синхронизировать элементы slideToggle (), чтобы они все разворачивались / сворачивались независимо от текущего состояния? - PullRequest
Новая
       13

Как синхронизировать элементы slideToggle (), чтобы они все разворачивались / сворачивались независимо от текущего состояния?

0 голосов
/ 10 июня 2018

Я пытаюсь показать / скрыть разделы, используя триггеры, основанные на классах.Таким образом, легко вызвать класс триггера для любого элемента, и он будет сдвигать следующий класс элемента show / hide в DOM.

Первая часть работает нормально.Теперь я добавляю триггер, чтобы развернуть / свернуть ВСЕ элементы.Проблема в том, что я не могу понять, как синхронизировать их состояния.

Например: я нажимаю на 3 из 8 элементов, чтобы они открылись и стали видимыми, остальные 5 все еще закрыты ... Теперь, когдаЯ щелкаю своим триггером «Развернуть / Свернуть все», используя slideToggle, который просто переключает их состояния, и в результате я получаю 3 закрытых и 5 открытых.

Как мне синхронизировать их состояния независимо от их текущего состояния?

Я пытался выяснить условия, чтобы проверить, есть ли в триггере класс открытия или закрытия, а затем переключить следующий элемент, но пока я только запутался.

Вот мой код: 

jQuery( document ).ready( function( $ ) {

    // The element to hide/reveal
    $( '.bodhi-hide-reveal' ).hide();

    // The trigger to hide/reveal
    $( '.bodhi-reveal-trigger' ).click( function( e ) {

        e.preventDefault();

        // Target only the next element to hide/reveal and toggle it
        $( this ).next( '.bodhi-hide-reveal' ).slideToggle();

        // Toggle the trigger class
        $( '.bodhi-reveal-trigger' ).toggleClass( 'opened closed' );

    });

    // Expand/collapse all button
    $( '.expand-collapse-all' ).click( function( e ) {

        e.preventDefault();

        // Find all hide/reveal elements and toggle them all together
        $( 'body' ).find( '.bodhi-hide-reveal' ).slideToggle();

    });

});

1 Ответ

0 голосов
/ 10 июня 2018

Достаточно просто класса с именем «open», чтобы определить, открыт следующий или близкий div.Поэтому я пишу блок IF / ELSE, чтобы решить, будет ли slideUp или SlideDown.Также вы должны решить, что вы будете делать, когда некоторые из div'ов будут расширены?Вы хотите свернуть все или расширить все?Я предпочитаю свернуть все сначала.Поэтому я ищу, чтобы найти opened единицу (используя длину массива), и, если я найду его, я сверну все div, в другом месте разверну все:

Также есть некоторые неэффективные селекторы, такие как $( 'body' ).find().Я также заменяю эти селекторы эффективными: 

jQuery( document ).ready( function( $ ) {

// The element to hide/reveal
$('.bodhi-hide-reveal').hide();
$('.bodhi-reveal-trigger').removeClass("opened");

// The trigger to hide/reveal
$('.bodhi-reveal-trigger').click( function( e ) {

    e.preventDefault();

    // Target only the next element to hide/reveal and toggle it
    $(this).next('.bodhi-hide-reveal').slideToggle();

    // Toggle the trigger class
    $(this).toggleClass('opened');

});

// Expand/collapse all button
$('.expand-collapse-all').click( function( e ) {

    e.preventDefault();

    //Check if there is at least one open div:

    if ($('.bodhi-reveal-trigger.opened').length){
        $('.bodhi-reveal-trigger').removeClass("opened")
        $('.bodhi-hide-reveal').stop().slideUp();
    }

    else {
        $('.bodhi-reveal-trigger').addClass("opened")
        $('.bodhi-hide-reveal').stop().slideDown();        
    }

});

});
...