부트 스트랩 - '특수'속성이있는 항목 접기

Question

이것은 내 첫 번째 질문이므로 저를 먹지 마십시오.

부트 스트랩에서 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