我有一个包含可折叠内容的列表视图。过滤器会自动展开可折叠内容。这是通过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>
答案 0 :(得分:1)
您可以在一个功能中执行此操作。请使用可过滤的 widgit's Filter event ,而不是列表中的updatelayout。每次过滤操作后都会触发此事件。在处理程序中检查列表中的类.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