啓動過濾器後重置jQuery的ListView可摺疊內容

Question

我有一個可摺疊內容的列表視圖。過濾器會自動展開可摺疊內容。這是通過JavaScript完成的。 重置搜索過濾器後，所有項目列表保持展開狀態。我怎樣才能重置到初始狀態（摺疊）？

下面是代碼： JsFiddle

<script> 
    $(document).on('pageinit', function() { 

     $("#iamalist").on('updatelayout', function() { 

      if (($('#iamalist li').length - $('#iamalist .ui-screen-hidden').length) < $('#iamalist li').length) { 
       $('#iamalist li').each(function() { 
        $(this).find('.ui-collapsible-content').removeClass('ui-collapsible-content-collapsed'); 
        $(this).find('.ui-icon-plus').addClass('ui-icon-minus'); 
        $(this).find('.ui-icon-plus').removeClass('ui-icon-plus'); 
       }); 
      } 
     }); 
    }); 
</script> 
<div data-role="content" id="iama"> 
    <ul data-role="listview" id="iamalist" data-inset='true' data-filter="true" data-filter-placeholder="Search term is..."> 
     <li> 
      <div data-role="collapsible" data-inset='false'> 
       <h3>Title</h3> 

       <p>eu</p> 
      </div> 
     </li> 
     <li> 
      <div data-role="collapsible" data-inset='false'> 
       <h3>Title</h3> 

       <p>tu</p> 
      </div> 
     </li> 
     <li> 
      <div data-role="collapsible" data-inset='false'> 
       <h3>Title</h3> 

       <p>voi</p> 
      </div> 
     </li> 
     <li> 
      <div data-role="collapsible" data-inset='false'> 
       <h3>Title</h3> 

       <p>Answer.</p> 
      </div> 
     </li> 
     <li> 
      <div data-role="collapsible" data-inset='false'> 
       <h3>Title</h3> 

       <p>Answer.</p> 
      </div> 
     </li> 
    </ul> 
</div> 

Answer 1

您可以在一個功能做到這一點。使用可過濾的widgit's Filter event而不是列表中的更新佈局。此事件在每個過濾器操作後觸發。在處理程序中檢查列表中的類.ui-screen-hidden。如果不存在，請摺疊所有可摺疊的部分，否則展開它們。

可摺疊的小部件有collapse和expand，您可以使用的方法。

$("#iamalist").on("filterablefilter", function(event, ui) {  
    if ($("#iamalist .ui-screen-hidden").length == 0){ 
     $('#iamalist [data-role="collapsible"]').collapsible("collapse"); 
    } else { 
     $('#iamalist [data-role="collapsible"]').collapsible("expand"); 
    }  
}); 

更新FIDDLE