twitter-bootstrap - Bootstrap - 折叠带有 'special' 属性的项目

Question

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

我想从 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>

Answer 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