Question

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

Here's a JsFiddle演示了部分工作的实现。不幸的是，尽管手风琴功能有效，但单选按钮不会被选中（除了初始选择，随后不会改变）。

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

我已经看到了this answer类似的问题，但我更愿意避免编辑Bootstrap代码，并希望可能有一种纯粹的声明式方法来使这项工作。

非常感谢您的建议，添

编辑：对于遇到同样问题的其他人，此功能在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

下面的代码略显优雅，但基于Schmalzy的回答。

这不会更好，但确实减少了所有手风琴切换的一个代码块。

如果我添加了额外的切换，我想避免更新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阻止了这一点。

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

3 个答案: