你能为Bootstrap指定一个"数据目标",它指的是不使用ID的兄弟DOM元素吗？

Question

我正在动态地向页面添加可折叠元素.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在执行范围内引用的方法(请参阅bootstrap-collapse.js中的第147-153行以供其使用) ).

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

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(更新)

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

关于IE问题的注意事项

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

Answer 2

@merv 的解决方案在 IE9 及更低版本中对我不起作用，因为除非您单击每个项目一次，否则可折叠状态不可用。不过它在 Firefox 和 Chrome 中运行良好。因此，单击两次后，一切正常。

我所做的是.collapse-next为触发元素设置一个类，然后ul使用toggleset to强制他们的兄弟姐妹崩溃false：

$(".collapse-next").closest('li').each(function(){
  if ($(this).hasClass('active')) {
    // pop up active menu items
    $(this).children("ul").collapse('show');
  } else {
    // just make it collapsible but don't expand
    $(this).children("ul").collapse({ toggle: false });
  }
});

这是用于实际切换菜单状态：

$('.collapse-next').click(function(e){
  e.preventDefault();
  $(this).parent().next().collapse('toggle');
});

似乎使用data-属性是一种更现代和更简洁的方法，但对于使用类和 jQuery 的旧浏览器似乎也能完成这项工作。

Answer 3

没有javascript解决方案或解决方案依赖于已经在使用的bootstrap JS，只是利用DOM结构-

看到data-target=""...

避免笨重的解决方案并且不需要 ID 或额外的 JS 的提示，使用标记放置的技巧 -

<button data-toggle="collapse" data-target=".dropdown-toggle:hover + .more-menu" type="button" class="btn btn-primary dropdown-toggle" >
  Show More Menu +
</button>
<div class="collapse more-menu">More menu here...</div>

这个 CSS 选择结构将选择所需的 DOM，.dropdown-toggle:hover + .more-menu然后我们可以应用所需的 CSS。有更多的方法可以利用我们拥有的东西。:hover或:active或许多其他方式。