Bootstrap 3 сворачивает аккордеон: сворачивает все работает, но затем не может развернуть все, сохраняя data-parent
Я использую Bootstrap 3 и пытаюсь настроить следующую структуру аккордеона / коллапса:
Onload: Каждая аккордеонная панель в группе полностью свернута и функционирует так, как задокументировано / ожидается.
Нажатие кнопки: каждая панель аккордеона раскрывается, и нажатие переключателей не имеет никакого эффекта (включая эффекты привязки URL).
Еще одно нажатие кнопки: все панели возвращаются в состояние загрузки; все рухнуло и кликабило как обычно.
Я перешел к шагу 2, но когда я снова нажимаю кнопку на шаге 3, это не имеет никакого эффекта. Я также не вижу сообщений об ошибках консоли в Chrome Dev Tools или при запуске кода через мой локальный JSHint.
Я бы хотел, чтобы этот цикл повторялся при каждом нажатии кнопки.
Я настроил свой код здесь http://bootply.com/98140 и здесь http://jsfiddle.net/A9vCx/
Я хотел бы знать, что я делаю неправильно, и я ценю предложения. Спасибо!
Мой HTML:
<button class="collapse-init">Click to disable accordion behavior</button>
<br><br>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
</div>
Мой JS:
$(function() {
var $active = true;
$('.panel-title > a').click(function(e) {
e.preventDefault();
});
$('.collapse-init').on('click', function() {
if(!$active) {
$active = true;
$('.panel-title > a').attr('data-toggle', 'collapse');
$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
$(this).html('Click to disable accordion behavior');
} else {
$active = false;
$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
$('.panel-title > a').removeAttr('data-toggle');
$(this).html('Click to enable accordion behavior');
}
});
});
4 ответа
Обновленный ответ
Попытка открыть несколько панелей свернутого элемента управления, который настроен как аккордеон, т.е. с data-parent набор атрибутов может оказаться довольно проблематичным и ошибочным (см. этот вопрос на нескольких открытых панелях после программного открытия панели)
Вместо этого лучшим подходом будет:
- Разрешить каждой панели переключаться индивидуально
- Затем, при необходимости, принудительно установите поведение аккордеона.
Чтобы каждая панель могла переключаться индивидуально, на data-toggle="collapse" элемент, установите data-target приписать .collapse селектор идентификатора панели (вместо установки data-parent атрибут родительского контроля. Вы можете прочитать больше об этом в вопросе " Изменить плагин Twitter Bootstrap", чтобы аккордеоны оставались открытыми.
Грубо говоря, каждая панель должна выглядеть так:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"
data-toggle="collapse"
data-target="#collapseOne">
Collapsible Group Item #1
</h4>
</div>
<div id="collapseOne"
class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
Чтобы вручную применить поведение аккордеона, вы можете создать обработчик для события свернуть шоу, которое происходит непосредственно перед отображением любых панелей. Используйте это, чтобы убедиться, что все другие открытые панели закрыты до того, как будет показана выбранная (см. Этот ответ для нескольких открытых панелей). Вам также нужно, чтобы код выполнялся только тогда, когда панели активны. Чтобы сделать все это, добавьте следующий код:
$('#accordion').on('show.bs.collapse', function () {
if (active) $('#accordion .in').collapse('hide');
});
Тогда используйте show а также hide переключать видимость каждой из панелей и data-toggle включить и отключить элементы управления.
$('#collapse-init').click(function () {
if (active) {
active = false;
$('.panel-collapse').collapse('show');
$('.panel-title').attr('data-toggle', '');
$(this).text('Enable accordion behavior');
} else {
active = true;
$('.panel-collapse').collapse('hide');
$('.panel-title').attr('data-toggle', 'collapse');
$(this).text('Disable accordion behavior');
}
});
Рабочая демонстрация в jsFiddle
Для любой причины $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'}); только кажется, что работает в первый раз, и это работает только для расширения складной. (Я попытался начать с расширенной складной конструкции, и она не сломалась.)
Это может быть что-то, что запускается один раз, когда вы инициализируете сжатие с этими параметрами.
Вам повезет больше, используя show а также hide методы.
Вот пример:
$(function() {
var $active = true;
$('.panel-title > a').click(function(e) {
e.preventDefault();
});
$('.collapse-init').on('click', function() {
if(!$active) {
$active = true;
$('.panel-title > a').attr('data-toggle', 'collapse');
$('.panel-collapse').collapse('hide');
$(this).html('Click to disable accordion behavior');
} else {
$active = false;
$('.panel-collapse').collapse('show');
$('.panel-title > a').attr('data-toggle','');
$(this).html('Click to enable accordion behavior');
}
});
});
Обновить
Конечно, KyleMit лучше справляется с этим, чем я. Я впечатлен его ответом и пониманием.
Я не понимаю, что происходит или почему show казалось, переключается в некоторых местах.
Но после того, как возиться некоторое время.. Наконец пришел со следующим решением:
$(function() {
var transition = false;
var $active = true;
$('.panel-title > a').click(function(e) {
e.preventDefault();
});
$('#accordion').on('show.bs.collapse',function(){
if($active){
$('#accordion .in').collapse('hide');
}
});
$('#accordion').on('hidden.bs.collapse',function(){
if(transition){
transition = false;
$('.panel-collapse').collapse('show');
}
});
$('.collapse-init').on('click', function() {
$('.collapse-init').prop('disabled','true');
if(!$active) {
$active = true;
$('.panel-title > a').attr('data-toggle', 'collapse');
$('.panel-collapse').collapse('hide');
$(this).html('Click to disable accordion behavior');
} else {
$active = false;
if($('.panel-collapse.in').length){
transition = true;
$('.panel-collapse.in').collapse('hide');
}
else{
$('.panel-collapse').collapse('show');
}
$('.panel-title > a').attr('data-toggle','');
$(this).html('Click to enable accordion behavior');
}
setTimeout(function(){
$('.collapse-init').prop('disabled','');
},800);
});
});
Чтобы сохранить природу аккордеона при желании также использовать функции "скрыть" и "показать", такие как .collapse( 'hide' ), вы должны инициализировать складные панели с родительским свойством, установленным в объекте с toggle: false прежде чем делать какие-либо призывы "скрыть" или "показать"
// initialize collapsible panels
$('#accordion .collapse').collapse({
toggle: false,
parent: '#accordion'
});
// show panel one (will collapse others in accordion)
$( '#collapseOne' ).collapse( 'show' );
// show panel two (will collapse others in accordion)
$( '#collapseTwo' ).collapse( 'show' );
// hide panel two (will not collapse/expand others in accordion)
$( '#collapseTwo' ).collapse( 'hide' );
Лучшее и проверенное решение - поместить следующий небольшой фрагмент, который свернет вкладку аккордеона, которая уже открыта при загрузке. В моем случае последняя шестая вкладка была открыта, поэтому я сделал ее свернутой при загрузке страницы.
$(document).ready(){
$('#collapseSix').collapse("hide");
}