Как использовать аккордеон Bootstrap с списком переключателей

Question

Я пытаюсь создать пользовательский интерфейс, который объединяет список переключателей HTML с функцией аккордеона, предлагаемой компонентом Bootstrap collapse. Цель состоит в том, что выбор любого переключателя также расширяет панель аккордеона непосредственно под ней.

Here's a JsFiddle, который демонстрирует частично действующую реализацию. К сожалению, хотя функциональность аккордеона работает, переключатели не выбираются (кроме начального выбора, который впоследствии никогда не изменяется).

Извините недействительный HTML в моем примере. Я знаю, что элемент input не имеет атрибута href, но я не считаю, что это причина проблемы.

Я видел this answer к аналогичному вопросу, но я бы предпочел не редактировать код Bootstrap и надеяться, что может быть чисто декларативный способ сделать эту работу.

Большое спасибо за ваши предложения, Tim

EDIT: Для тех, кто еще сталкивается с аналогичной проблемой, эта функция работает вне коробки в Bootstrap v3.0.

Answer 1

Я получил его для работы с небольшим дополнительным jQuery. jsFiddle

Я уверен, что есть более элегантные способы сделать это. но он работает.

$('#collapseOne').on('shown', function(){ 
    $('#radio1').prop('checked', true); 
}); 

$('#collapseTwo').on('shown', function(){ 
    $('#radio2').prop('checked', true); 
}); 

$('#collapseThree').on('shown', function(){ 
    $('#radio3').prop('checked', true); 
}); 

Answer 2

Код ниже немного более изящный, но на основе ответа Шмальзи.

Это не работает лучше, но уменьшает до одного блока кода для всех аккордеонных переключателей.

Я хотел избежать обновления кода JS, если я добавил дополнительные переключатели.

$("[id^=collapse]").on('shown', function(){ 
    $(this).parents('.accordion-group').find('.accordion-toggle') 
     .prop('checked', true); 
}); 

Answer 3

Проблема на самом деле является атрибутом href на этикетке. Вместо этого используйте атрибут data-target.

Bootstrap предполагает действительный html и что href будет находиться на привязном ярлыке. Таким образом, он предотвращает действие по умолчанию, которое должно следовать за ссылкой и вместо этого выполняет сбой. В вашем случае действие щелчка по метке по умолчанию - проверить соответствующий вход. Bootstrap предотвращает это.