Question

我已经制作了父母＆amp;我在jquery.mobile库中使用的子可折叠内容。它在过滤方面按照我的要求工作。它最初加载的内容按照我的意愿折叠。

但是，在应用过滤器搜索时，它不会扩展内容。结果已过滤，但您需要手动[单击]展开它们以查看结果，这并不理想。特别是当结果可能从多个可折叠内容部分返回时。

以下是示例代码演示： 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'从'planets'可扩展部分返回结果'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/

jquery.mobile可折叠父母＆amp;使用过滤器

1 个答案: