我是否可以在 Bootstrap 3 中为折叠手风琴指定一个相对的“数据目标”，同时保留“折叠其他”功能

Can I specify a relative “data-target” for collapse accordion in Bootstrap 3 whilst retaining the “collapse others” functionality?

本文关键字：折叠 相对 数据目标 目标 数据 折叠其他 功能 其他 保留 一个 Bootstrap      更新时间：2023-09-26

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

我问题的第一部分在 Bootstrap 2 中得到了回答：你能为 Bootstrap 指定一个"数据目标"，它指的是一个不使用 ID 的同级 DOM 元素吗？

。所以我已将上述答案转换为在 Bootstrap 3（小提琴链接）中工作：

$('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 文档中的标准手风琴一样，即这不需要没有 ID！

找到修复程序后更新

在接受下面bbone的回答后，我更新了这个块，以按照提出的问题运行。（工作演示JS小提琴）。

$('.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');
});

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

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

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

这是一个工作的小提琴。

我已经更新了这个脚本以使用嵌套折叠面板。给你：

$(function(){
  $('.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 > .panel-collapse').collapse('hide');
    // ...then open just the one we want
    var $target = $(this).parentsUntil('.panel-group', '.panel').children('.panel-collapse');
    $target.collapse('toggle');
  }); 
});

敲除Js的可能替代解决方案。面板的 id 属性稍后在代码中签名。然后自动传播到目标数据属性和 Div id 属性，collapse_"文本。

<li class="panel panel-info" data-bind="with: $root.ActivityById($root.GetId($element))">
    <div class="panel-heading">
        <a data-toggle="collapse" data-bind="attr: { 'data-target' : '#collapse_' + Id() }" href="#test" class="collapsed">
            Header
        </a>
    </div>
    <div data-bind="attr: { id : 'collapse_' + Id() }" class="panel-collapse collapse in">
        <div class=" panel-body">
            Panel body
        </div>
        <div class="panel-footer">
            Panel footer
        </div>
    </div>
</li>

我希望它对某人有用...

相关文章：