Блог

Я расширяю и сворачиваю divs. Я также разрешаю развернуть все и свернуть все. Проблема в том, что если div уже развернут, когда пользователь нажимает развернуть все, расширенный div будет свернут, в то время как другие divs будут расширяться (и наоборот). Как я могу развернуть все подразделения, которые еще не развернуты, и свернуть все подразделения, которые еще не свернуты.

 $(document).ready(function(){
    $(".toggle_container").hide();

    //Expand/Collapse Individual Boxes
    $("span.expand_heading").toggle(function(){
        $(this).addClass("active"); 
        }, function () {
        $(this).removeClass("active");
    });
    $("span.expand_heading").click(function(){
        $(this).nextAll(".toggle_container:first").slideToggle("slow");
    });

    //Show hide 'expand all' and 'collapse all' text
    $(".expand_all").toggle(function(){
        $(this).addClass("expanded"); 
        }, function () {
        $(this).removeClass("expanded");
    });

    //expand or collapse all boxes
    $(".expand_all").click(function(){
        $(".toggle_container").slideToggle("slow");
    });
});
 

 //expand or collapse all boxes
    $(".expand_all").click(function(){
        if($(this).hasClass("expanded")){
           $(".toggle_container").slideDown("slow");
        }
        else {
           $(".toggle_container").slideUp("slow");
        }
    });
 

Вы можете проверить, имеет ли ваш элемент expand_all расширенный класс или нет, и сдвинуть все ваши элементы вверх или вниз в зависимости.

попробуйте ограничить свой селектор только скрытыми значениями:

 $(".toggle_container:hidden").slideToggle("slow");
 

http://api.jquery.com/hidden-selector/

.slideDown() и .slideUp() должны делать.

Более эффективным и действенным способом сделать это было бы следующее:

 $(document).ready(function ()
{
    var panels = $('.panel-collapse.collapse');
    var collapse = function()
    {
        if (!$(this).hasClass ('open')) return;
        $(this).slideUp().removeClass('open').removeClass('active');
    };
    $(".panel-heading").click (function()
    {
        var next = $(this).next();
        if (next.hasClass ('active')) return;
        panels.each (collapse);
        next.slideToggle().toggleClass('open').addClass('active');
    });
});
 

Этот подход учитывает следующие моменты:

• Храните сворачиваемые панели в переменной panels , чтобы нам не нужно было искать их каждый раз при нажатии на заголовок.
• При нажатии на заголовок, если его панель уже открыта, нам ничего не нужно делать.
• При сбросе панелей при каждом нажатии мы закрываем только открытые и игнорируем остальные.

JSFiddle