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

Posted 2023-03-05

【中文标题】如何使用带有单选按钮列表的 Bootstrap 手风琴

【英文标题】：How to use Bootstrap accordion with a radio button list

【发布时间】：2013-08-09 04:01:34

【问题描述】：

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

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

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

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

非常感谢您的建议， 蒂姆

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

【参考方案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);
);

【讨论】：

感谢您的快速回答。我仍然很好奇是否有一个纯粹的声明性解决方案，但你的解决方案确实有效，而且已经足够好了。谢谢。

感谢您的解决方案，但是一些奇怪的副作用是单击启用的单选按钮会使手风琴再次崩溃。

【参考方案2】：

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

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

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

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

【参考方案3】：

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

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