Твиттер Bootstrap аккордеонный тумблер не работает правильно

Когда я хочу использовать одну кнопку для переключения всех элементов аккордеона, и некоторые из них уже открыты, функциональность переключения ведет себя очень странно.

Если я реализую этот код:

$('.corearea-wrapper .corearea-link').click(function(e) {
    e.preventDefault();
    mywrapper = $('.corearea-wrapper #' + $(this).parent().children('.row.fixedcol').attr('id'));
    if(mywrapper.hasClass('allopen')) {
        mywrapper.find('.collapse').collapse('hide');
        mywrapper.find('article').removeClass('active');
        mywrapper.removeClass('allopen');
    } else {
        mywrapper.find('.collapse').collapse('show');
        mywrapper.find('article').addClass('active');
        mywrapper.addClass('allopen');
    }
}); 

Мой ожидаемый результат: первый щелчок, закрыть все открытые элементы, второй щелчок открыть все элементы, третий щелчок закрыть все и т. Д.

Что происходит вместо этого: первый щелчок, открытые элементы закрываются, НО закрытые элементы открываются, второй щелчок открываются, элементы закрываются (все элементы закрываются), третий щелчок, все элементы открываются, четвертый щелчок, все элементы открываются и т. Д.

Смотрите демо здесь:

http://jsfiddle.net/Lwrhk/

1 ответ

Решение

Работая над той же проблемой, я нашел ваш вопрос, поиграл с вашей скрипкой и заставил ее работать, воздействуя только на элементы, которые были развернуты или свернуты:

$('.corearea-wrapper .corearea-link').click(function(e) {
    e.preventDefault();
    mywrapper = $('.corearea-wrapper #' + $(this).parent().children('.row.fixedcol').attr('id'));
    if(mywrapper.hasClass('allopen')) {
        mywrapper.find('.collapse.in').collapse('hide');
        //mywrapper.find('article').removeClass('active');
        mywrapper.removeClass('allopen');
    } else {
        mywrapper.find('.collapse:not(.in)').collapse('show');            
        //mywrapper.find('article').addClass('active');
        mywrapper.addClass('allopen');
    }
});

Рабочая jfiddle здесь:

http://jsfiddle.net/RobbSadler/Lwrhk/12/

Другие вопросы по тегам