jQuery 在过滤器上展开可折叠列表视图

Question

我有几个折叠的列表视图。这些可以通过输入字段进行过滤。目前都是折叠状态，过滤后需要单独打开。我想过滤以自动打开它们。我的问题与这个 here 非常相似，但具体来说，我过滤的是可折叠列表视图小部件，而不是可折叠小部件。任何帮助将不胜感激！

html:

    <form class="ui-filterable">
        <input id="filterBasic-input" data-type="search">
    </form>
    <div class="filterMe" data-role="collapsible" data-inset="true" data-iconpos="right" data-collapsed-icon="carat-d" and data-expanded-icon="carat-u">
        <h2>Foods</h2>
        <ul data-role="listview" data-filter="true" data-input="#filterBasic-input">
            <li data-role="list-divider">Fruits</li>
            <li><a href="#"">Apple</a></li>
            <li><a href="#"">Orange</a></li>
            <li><a href="#"">Banana</a></li>
            <li><a href="#"">Grapes</a></li>
            <li data-role="list-divider">Vegies</li>
            <li><a href="#"">Carrot</a></li>
            <li><a href="#"">Lettuce</a></li>
            <li><a href="#"">Pumpkin</a></li>
            <li><a href="#"">Celery</a></li>
        </ul>
    </div>  
    <div class="filterMe" data-role="collapsible" data-iconpos="right" data-collapsed-icon="carat-d" and data-expanded-icon="carat-u">
        <h2>Things</h2>
        <ul data-role="listview" data-filter="true" data-input="#filterBasic-input">
            <li data-role="list-divider">Kitchen things</li>
            <li><a href="#"">Plates</a></li>
            <li><a href="#"">Bowls</a></li>
            <li><a href="#"">Cutlery</a></li>
            <li data-role="list-divider">Office things</li>
            <li><a href="#"">Pens</a></li>
            <li><a href="#"">Paper</a></li>
            <li><a href="#"">Computer</a></li>
        </ul>
    </div>

javascript:

$(document).on("pageshow", "#usagePicker", function () {
    $(".filterMe").on("filterablefilter", function (event, ui) {
        $(".ui-collapsible:not(.ui-screen-hidden)").collapsible("option", "collapsed", false);
    });
});

Answer 1

我会检查过滤器后是否有任何列表视图项目可见，然后 expand/collapse 基于此：

$(".filterMe").on("filterablefilter", function (event, ui) {
    var anyVisible = false;
    ui.items.each(function( index ) {
        if (!$(this).hasClass("ui-screen-hidden")){
            anyVisible = true;
        }
    });
    $(this).collapsible("option", "collapsed", !anyVisible);
});

jQuery 在过滤器上展开可折叠列表视图

jQuery expand collapsible list view on filter

javascript

jquery

jquery-mobile

DEMO