jquery.mobile 可折叠的 parent 和 child 用过滤器展开

Question

我已经从 jquery.mobile 库中使用父子可折叠内容制作了一个 codepen 示例。它在过滤方面按照我的要求工作。它最初加载的内容按我的意愿折叠。

但是它不会在应用过滤器搜索时扩展内容。过滤了结果，但需要手动【点击】展开才能看到结果，不太理想。尤其是当结果可能从多个可折叠内容部分返回时。

这是示例代码演示: http://codepen.io/anon/pen/LRqBaa

这是该示例的 html:

<div data-role="page" id="myfilter">

I would like the relevent below collapsed contents to expand when the filter is used.
For example, filtering for 'liz' would show just the 'Animals' collapsible be expanded with just the one result under it - Lizard

<h2>Collapsible set with search</h2>
<form>
<input data-type="search" id="searchForCollapsibleSetChildren">
</form>
<div data-role="collapsible-set" data-filter="true" data-children="> div, > div div ul li" data-inset="true" id="collapsiblesetForFilterChildren" data-input="#searchForCollapsibleSetChildren">
    <div data-role="collapsible" data-filtertext="Animals Cats Dogs Lizards snakes">
        <h3>Animals</h3>
        <ul data-role="listview" data-inset="false">
            <li data-filtertext="Animals Cats">Cats</li>
            <li data-filtertext="Animals Dogs">Dogs</li>
            <li data-filtertext="Animals Lizards">Lizards</li>
            <li data-filtertext="Animals Snakes">Snakes</li>
        </ul>
    </div>
    <div data-role="collapsible" data-filtertext="Cars Acura Audi BMW Cadillac">
        <h3>Cars</h3>
        <ul data-role="listview" data-inset="false">
            <li data-filtertext="Cars Acura">Acura</li>
            <li data-filtertext="Cars Audi">Audi</li>
            <li data-filtertext="Cars BMW">BMW</li>
            <li data-filtertext="Cars Cadillac">Cadillac</li>
        </ul>
    </div>
    <div data-role="collapsible" data-filtertext="Planets Earth Jupiter Mars Mercury">
        <h3>Planets</h3>
        <ul data-role="listview" data-inset="false">
            <li data-filtertext="Planets Acura">Earth</li>
            <li data-filtertext="Planets Jupiter">Jupiter</li>
            <li data-filtertext="Planets Mars">Mars</li>
            <li data-filtertext="Planets Mercury">Mercury</li>
        </ul>
    </div>
</div>

对于任何专家建议，我将不胜感激，因为我不确定如何实现这一点，并且在库示例页面中找不到任何内容。谢谢

编辑:

我刚刚找到了另一个 jsfiddle，它不是我创建的，但几乎是我所需要的。请看这个例子: https://jsfiddle.net/j5krxota/1/

在那里，您会注意到它确实会在找到过滤器的结果时扩展部分，这正是我想要的。不过，我更喜欢它，如果:

• 在清除过滤器时没有展开第一个可折叠的 [animals].. 如果您过滤“ca”，它会捕获结果“cats”，但是当您清除过滤器，“动物”部分保持展开状态。我希望它在过滤器清除后再次关闭。

• 在某些情况下，过滤器似乎有些不正确。例如，过滤器“ju”从“行星”可扩展部分返回结果“jupiter”。哪个是对的。但是，当您过滤“ca”时，“汽车”部分的“凯迪拉克”结果应该会返回，但“汽车”部分不会展开……由于检测到“猫”，只有“动物”部分会展开。

很抱歉在这里问了一些问题，但我不明白为什么它会这样过滤，似乎一个部分扩展了结果 [行星] 而另一个部分没有 [汽车]。我不知道为什么，也不知道如何用 js 自己解决这个问题。再次感谢!

Answer 1

请应用以下脚本来实现您的要求:

$(document).on("pagecreate", "#myfilter", function(){
    $("#collapsiblesetForFilterChildren").on( "filterablefilter", function( event, ui ) {
        ui.items.each(function( index ) {
              $(this).collapsible("option", "collapsed", $(this).hasClass("ui-screen-hidden")).removeClass("ui-screen-hidden");

        });
    });
});

注意:为了应用上面的 js，我也对您的 HTML 结构进行了一些更改。

请完成工作演示:http://jsfiddle.net/2Snbq/29/