Bootstrap - 折叠带有“特殊”属性的项目

【问题标题】：Bootstrap - Collapse item with 'special' attribute on itBootstrap - 折叠带有“特殊”属性的项目
【发布时间】：2016-06-06 07:19:00
【问题描述】：

这是我的第一个问题，所以不要吃我。

我想从 bootstrap 中使用 collapse，但我不想在 data-target/aria-controls 中使用 id/class。有没有办法通过这样的属性来调用它？

 <a href="" role="button" data-toggle="collapse" aria-expanded="false" data-target="data-s-collapse='item'" aria-controls="data-s-collapse='item'">
 </a>
 <div class="collapse" data-s-collapse="item">
 </div>

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

是的，你可以！ data-target 属性接受任何有效的 CSS 选择器 (Bootstrap docs)。

因此，使用数据属性 CSS 选择器 (CSS Tricks article) 您可以完全按照自己的意愿行事。

这是一个最小的工作示例（仅在 Chrome 中测试。为便于阅读而格式化）。

<a href="#" 
   role="button"
   data-toggle="collapse" 
   aria-expanded="false" 
   data-target="[data-s-collapse='item']" 
   aria-controls="[data-s-collapse='item']">I'm a button
 </a>
 <div class="collapse" data-s-collapse="item">
   I'm some stuff in a collapsible
 </div>

Bootply example

应该在支持属性选择器的所有浏览器中工作，这些属性选择器出现在 CSS 级别 2.1 中，所以应该适用于所有正在使用的浏览器 - http://caniuse.com/#feat=css-sel2

【讨论】：