3

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

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

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

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

非常感谢您的建议，蒂姆

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

4

3 回答 3

5

我让它与一些额外的 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);
});
于 2013-08-07T18:26:32.280 回答
4

下面的代码稍微优雅一些​​，但基于 Schmalzy 的回答。

这并没有更好的工作，但确实减少了所有手风琴切换的代码块。

如果我添加了额外的切换，我想避免更新 JS 代码。

$("[id^=collapse]").on('shown', function(){
    $(this).parents('.accordion-group').find('.accordion-toggle')
         .prop('checked', true);
});
于 2013-08-22T21:26:54.960 回答
2

问题确实是href标签上的属性。请改用data-target标签上的属性。

Bootstrap 假定 html 有效，并且 href 将位于锚标记上。因此，它会阻止默认操作，即跟随链接并执行折叠。在您的情况下，单击标签的默认操作是检查关联的输入。Bootstrap 正在阻止这种情况。

于 2013-12-06T21:28:33.557 回答