的 DEMO

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

我会检查过滤器后是否有任何listview项目可见，然后根据它展开/折叠：

$(".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在过滤器上展开可折叠列表视图

1 个答案:

的 DEMO