【问题标题】: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

    【讨论】:

      猜你喜欢
      • 2019-11-17
      • 2014-12-19
      • 2022-07-07
      • 1970-01-01
      • 2013-08-28
      • 1970-01-01
      • 2021-10-03
      • 2014-06-07
      • 1970-01-01
      相关资源
      最近更新 更多