2016-06-06 10 views
3

Dies ist meine erste Frage, also iss mich nicht.Bootstrap - Collapse Artikel mit 'Special' Attribut darauf

Ich möchte Collapse von Bootstrap verwenden, aber ich möchte nicht ID/Klasse in Data-Target/Aria-Kontrollen verwenden. Gibt es eine Möglichkeit, es so zu nennen?

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

Antwort

3

Ja, Sie können! Die Attribute data-target akzeptieren alle gültigen CSS-Selektoren (Bootstrap docs).

Also mit Daten-Attribut-CSS-Selektoren (CSS Tricks article) können Sie genau das tun, was Sie wollen.

Hier ist ein minimales Arbeitsbeispiel (nur in Chrome getestet. Formatiert für die Lesbarkeit).

<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

Sollte in allen Browsern, die Attributselektoren unterstützen, die 2.1 in CSS Ebene vorhanden waren, so sollten für alle im Einsatz Browsern sein - http://caniuse.com/#feat=css-sel2

Verwandte Themen