축소/축소 동적으로 축소

Question

jQuery Monile 축소 가능 목록을 만듭니다. 다음 구조입니다 :

<div data-role="collapsibleset" data-theme="a" data-content-theme="a"> 

    <div data-role="collapsible"> 
     Text content 
    </div 

    <div data-role="collapsible"> 
    Text content 
    </div > 

</div > 

단추를 클릭하면 어떻게 모든 축소 가능한 요소를 한 번에 열 수 있습니까?

Answer 1

축소 가능 세트 위젯은 디자인에 의해 한 번에 하나의 열린 접을 수 있습니다. 이 동작없이 접을 수있는 세트의 모양을 원하는 경우, data-role="collapsibleset" 대신이 class="ui-collapsible-set"을 추가, 제거 :

<div id="theSet" class="ui-collapsible-set" > 
    <div data-role="collapsible" > 
     <h3>Title 1</h3> 
     Text content 1 
    </div> 
    <div data-role="collapsible" > 
     <h3>Title 2</h3> 
    Text content 2 
    </div> 
    <div data-role="collapsible" > 
     <h3>Title 3</h3> 
    Text content 3 
    </div >   
</div > 

이 DEMO

가 UPDATE :는 버튼 클릭에서 모든 확장 . 을 감안할 때 모두 확장을 다음과 같이 모든 버튼을 축소

<div class="ui-grid-a"> 
    <div class="ui-block-a"><a id="btnExpand" class="ui-btn ui-corner-all collapseExpand">Expand All</a> 
    </div> 
    <div class="ui-block-b"><a id="btnCollapse" class="ui-btn ui-corner-all collapseExpand">Collapse All</a> 
    </div> 
</div> 

이 세트의 모든 collapsibles를 반환하는 선택기 버튼과 사용자 .collapsible("option", "collapsed", true or false);에 대한 핸들러 작성 :

$(document).on("click", ".collapseExpand", function(){ 
    var collapseAll = this.id == "btnCollapse"; 
    $('#theSet [data-role="collapsible"]').collapsible("option", "collapsed", collapseAll); 
}); 

업데이트를 DEMO

이 기사의 내용은 다음과 같습니다. http://jqmtricks.wordpress.com/2014/04/25/filterable-opens-matching-collapsibles/로 모두 확장하고 모두 축소 할 수 있으며 필터링 가능한 위젯을 사용하여 검색 상자에 입력 할 때 일치하는 접기 표시를 열 수 있습니다.