Question

我正在寻找一种无ID的方式来使用Bootstrap 3的手风琴。我不想使用任意唯一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');
});

然而，我也希望＆＃34;关闭他人＆＃34;功能仍然有效，即data-parent="#accordion"。我并不介意这个引用父母的ID，尽管标准手风琴在Bootstrap 3文档中也是如此，即这不需要无ID！

找到修复后的更新

在接受下面的bbone回答之后，我已经更新了这个块以便在问题中发挥作用。 (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

Answer 2

我已更新此脚本以使用嵌套折叠面板。你走了：

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

Answer 3

使用knockoutJs的可能替代解决方案。面板的Id属性稍后在代码中签名。然后使用'collapse_'文字自动传播到目标数据属性和Div id属性。

<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>

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

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

3 个答案: