javascript - 我可以在 Bootstrap 3 中为折叠 Accordion 指定相对 “data-target”，同时保留 “collapse others” 功能吗？

Question

我正在寻找一种无需 ID 的方式来使用 Bootstrap 3 的 Accordion 。我不想使用任意的唯一 ID 来链接开启器和折叠区域。

Bootstrap 2 回答了我问题的第一部分: Can you specify a "data-target" for Bootstrap which refers to a sibling DOM element without using an ID?

...所以我已将上述答案转换为在 Bootstrap 3 中工作 (fiddle link) :

$('body').on('click', '[data-toggle=collapse-next]', function (e) {
  var $target = $(this).parents('.panel').find('.panel-collapse');
  $target.collapse('toggle');
});

但是我也希望“关闭其他”功能仍然有效，即 data-parent="#accordion"。我不介意引用父级的 ID，尽管 Bootstrap 3 文档中的标准 Accordion 就是这样做的，即这不需要是无 ID 的!

找到修复后更新

在接受了 bbone 下面的回答后，我更新了这个 block 以按照所问的问题运行。 (working demo js fiddle) .

$('.panel-collapse').collapse({toggle: false});
$('body').on('click', '[data-toggle=collapse-next]', function (e) {
    e.preventDefault();

    // Try to close all of the collapse areas first
    var parent_id = $(this).data('parent');
    $(parent_id+' .panel-collapse').collapse('hide');

    // ...then open just the one we want
    var $target = $(this).parents('.panel').find('.panel-collapse');
    $target.collapse('toggle');
});

Answer 1

您遇到问题是因为在您的示例中，您在调用 $(parent_id+' .panel-collapse').collapse('hide') 之前尚未初始化折叠功能。

您可以通过在文档就绪上添加以下行来解决此问题:

$('.panel-collapse').collapse({toggle: false});

Here's a working fiddle .