如何使用带有单选按钮列表的 Bootstrap 手风琴

Question

我正在尝试构建一个将 HTML 单选按钮列表与 Bootstrapcollapse组件提供的手风琴功能相结合的 UI 。目标是选择任何单选按钮也会展开紧邻其下方的手风琴面板。

这是一个演示部分工作实现的 JsFiddle。不幸的是，虽然手风琴功能有效，但单选按钮没有被选中（除了最初的选择，随后永远不会改变）。

请原谅我的示例中无效的 HTML。我知道input元素没有href属性，但我不认为这是问题的原因。

我已经看到了类似问题的这个答案，但我宁愿避免编辑 Bootstrap 代码，并希望可能有一种纯粹的声明方式来完成这项工作。

非常感谢您的建议，蒂姆

编辑：对于面临相同问题的任何其他人，此功能在 Bootstrap v3.0 中开箱即用。

Answer 1

我让它与一些额外的 jQuery 一起工作。js小提琴

我相信有更优雅的方法可以做到这一点。但它有效。

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

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

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