javascript - 您可以为 Bootstrap 指定一个 "data-target"来引用同级 DOM 元素而不使用 ID 吗？

Question

我正在向页面动态添加 Collapsable 元素。 Bootstrap 使用“data-target”属性来指定折叠切换适用于哪个元素。

来自文档:

The data-target attribute accepts a css selector

有没有办法编写一个选择器来指定父元素的下一个兄弟元素？文档中的所有示例似乎都使用按 ID 进行选择。

具体来说，HTML 看起来像这样:

<div class="accordion-group">
<div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-target="#collapseOne">
    Generated Title
  </a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
  <div class="accordion-inner">
    Generated Content... this is big and sometimes needs collapsing
  </div>
</div>
</div>

我想写这样的东西(非法使用 jquery 语法的伪代码):

<a class="accordion-toggle" data-toggle="collapse" data-target="$(this).parent().next()">

但我开始怀疑这可能无法通过 CSS 选择器实现。

现在，作为解决方法，我在创建元素时生成一个新 ID(附加到字符串的递增数字)。

是否有使用选择器的更好方法？我应该使用一些创建后的 javascript 来设置数据目标属性吗？为动态内容生成 ID 是标准方法吗？

Answer 1

虽然 data-target 属性中的选择器确实是一个 jQuery 选择器，但是这个插件的 data-api 规范没有提供引用回 this 的方法> 在执行范围内(参见 lines 147-153 in bootstrap-collapse.js 的使用)。

但是，我想提供另一种替代方法，即使用您自己的自定义切换说明符扩展数据 API。我们称之为collapse-next。

JS ^{(见更新说明)}

$('body').on('click.collapse-next.data-api', '[data-toggle=collapse-next]', function (e) {
  var $target = $(this).parent().next()
  $target.data('collapse') ? $target.collapse('toggle') : $target.collapse()
})

HTML

<a class="accordion-toggle" data-toggle="collapse-next">

JSFiddle (updated)

这里的缺点是它是一种相当紧密耦合的方法，因为 JS 假定标记的特定结构。

---

关于 IE 问题的注意事项

作为@slhck pointed out in his answer , IE9 及以下版本在使用我的答案的较早版本时显然在第一次点击时失败。原因实际上根本不是 IE 问题，而是 Bootstrap 问题。如果在 Carousel 对象未初始化的目标上调用 .collapse('toggle')，则 toggle() 方法将被调用两次 -在初始化期间一次，然后在初始化后再次明确。这绝对是一个 Bootstrap 错误，希望能得到修复。它在 Chrome、FF、IE10 等中没有出现的唯一原因是因为它们都支持 CSS 转换，因此当第二次调用时它会短路，因为第一次调用一个仍然活跃。上面更新的解决方法只是通过首先检查初始化并以不同方式处理它来避免双重调用问题。