Твиттер 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 здесь: