Question

您好我正在使用jQuery mobile来构建移动Web应用程序。我正在学习this page。

具体来说，我在可折叠套装中过滤时如何显示儿童？

例如，从示例代码中，当我输入cats时，它会返回Animal块。我需要点击它，然后看cats。当我搜索猫时，有什么方法我只能显示cats（换句话说：如何自动扩展相应的块？）。

<form>
<input data-type="search" id="searchForCollapsibleSetChildren">
</form>
<div data-role="collapsibleset" 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 Earth">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>

Answer 1

您可以使用filterablefilter事件（请参阅API）在每次搜索后执行一些JS：

$(document).on("filterablefilter", "#collapsiblesetForFilterChildren", function(event)
{
    var results = $("[data-role=collapsible]:visible");
    if (results.length !== 0)
        $(results[0]).collapsible("expand");
});

此代码扩展了结果集中的第一个可折叠（如果存在）。

JSFiddle

在jQuery mobile

1 个答案: