你能指定一个“数据目标”吗？对于Bootstrap，它引用兄弟DOM元素而不使用ID？ [英] Can you specify a "data-target" for Bootstrap which refers to a sibling DOM element without using an ID?

问题描述

我正在动态地向页面添加可折叠元素。 Bootstrap使用data-target属性指定折叠切换应用于哪个元素。

来自文档：

  data-target属性接受css选择器
  

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

具体来说，HTML看起来像：

 < div class =accordion-group> 
< div class =accordion-heading> 
< a class =accordion-toggledata-toggle =collapsedata-target =＃collapseOne> 
生成的标题
< / a> 
< / div> 
< div id =collapseOneclass =accordion-body collapse in> 
< div class =accordion-inner> 
生成的内容......这很大，有时需要折叠
< / div> 
< / div> 
< / div> 
  

我想写一些像（非法使用jquery语法的伪代码）：

 < a class =accordion-toggledata-toggle =collapsedata-target =$（this）.parent（）。下一个（）> 
  

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

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

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

解决方案

虽然中的选择器确实如此data-target 属性是一个jQuery选择器，这个插件的data-api规范没有提供在执行范围内引用回这个的方法（参见bootstrap-collapse.js中的第147-153行） 使用它。）

但是，我想提供另一种替代方法，即使用您自己的自定义切换说明符扩展data-api。我们称之为崩溃 - 下一步。

JS ^{（参见更新说明）}

  $（'body'）。on（'click.collapse-next.data-api'，'[data-toggle = collapse-next]'，函数（e）{
 var $ target = $（this）.parent（）。next（）
 $ target.data（'collapse'）？$ target.collapse（'toggle'）：$ target .collapse（）
}）
  

HTML

 < a class =accordion-toggledata-toggle =collapse-next> 
  

JSFiddle（更新）

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

---

关于IE问题的注释

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

I am dynamically adding Collapsable elements to a page. Bootstrap uses the "data-target" attribute to specify which element the collapse toggle applies to.

From the docs:

The data-target attribute accepts a css selector

Is there a way to write a selector which specifies the next sibling of the parent element? All of the examples from the docs seem to use selections by ID.

Specifically the HTML looks like:

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

I would like to write something like (pseudo code using jquery syntax illegally):

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

But I am starting to suspect this may not be possible with CSS selectors.

Right now as a workaround I am generating a new ID (an incrementing number appended to a string) when I create the element.

Is there a nicer approach using a selector? Should I be using some post-creation javascript to set the data-target attribute? Is generating IDs for dynamic content the standard approach?

解决方案

While it is true that the selector in a data-target attribute is a jQuery selector, the data-api specification for this plugin provides no means of referencing back to this in the scope of execution (see lines 147-153 in bootstrap-collapse.js for its use).

However, I would like to offer another alternative approach, which is to extend the data-api with your own custom toggle specifier. Let's call it collapse-next.

JS ^{(see update note)}

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

Downside here is that it's a rather tightly coupled approach, since the JS presumes a specific structure to the markup.

---

Note about IE issues

As @slhck pointed out in his answer, IE9 and under apparently fail on the first click when using an earlier revision of my answer. The cause is actually not an IE issue at all, but rather a Bootstrap one. If one invokes .collapse('toggle') on a target whose Carousel object is uninitialized, the toggle() method will be called twice - once during initialization and then again explicitly after initialization. This is definitely a Bootstrap bug and hopefully will get fixed. The only reason it doesn't appear as a problem in Chrome, FF, IE10, etc, is because they all support CSS transitions, and hence when the second call is made it short-circuits because the first one is still active. The updated workaround above merely avoids the double-call problem by checking for initialization first and handling it differently.

这篇关于你能指定一个“数据目标”吗？对于Bootstrap，它引用兄弟DOM元素而不使用ID？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！