3

我正在寻找一种无 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');
});
4

3 回答 3

3

您遇到了一个问题，因为在您的示例中，直到您调用$(parent_id+' .panel-collapse').collapse('hide').

您可以通过在准备好的文档中添加以下行来解决此问题：

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

这是一个工作小提琴。

于 2013-09-12T16:06:29.237 回答
1

我已更新此脚本以使用嵌套折叠面板。干得好：

$(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');
  }); 
});
于 2015-04-23T09:12:24.840 回答
0

淘汰赛的可能替代解决方案。面板的 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>

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

于 2015-07-21T15:12:45.200 回答