jquery - 如何使用 jQuery Mobile 过滤可折叠集？

Question

我有一个简单的可折叠集，我想使用单个过滤器进行过滤，该过滤器将显示在集上方。期望的结果是仅查看与我的搜索匹配的项目(而不是该项目出现的整个可折叠 block )。

请告知如何处理此任务...

<div data-role="content">
    <div data-role="collapsible-set">   
        <div data-role="collapsible" data-content-theme="c">
            <h3>Firs Collapsed list</h3>
            <ul data-role="listview" data-inset="false" data-theme="d">
                <li><a href="index.html">Acura</a></li>
                <li><a href="index.html">Audi</a></li>
                <li><a href="index.html">BMW</a></li>
            </ul>
        </div>
        <div data-role="collapsible" data-content-theme="c">
            <h3>Second Collapsed list</h3>
            <ul data-role="listview" data-inset="false" data-theme="d">
                <li><a href="index.html">Cadillac</a></li>
                <li><a href="index.html">Chrysler</a></li>
                <li><a href="index.html">Dodge</a></li>
            </ul>
        </div>
        <div data-role="collapsible" data-content-theme="c">
            <h3>Third Collapsed list</h3>
            <ul data-role="listview" data-inset="false" data-theme="d">
                <li><a href="index.html">Ferrari</a></li>
                <li><a href="index.html">Ford</a></li>
            </ul>
        </div>
    </div><!--/content-primary -->
</div>

Answer 1

您可以将 data-role="collapsible" 元素放在 data-role="listview" 元素中的列表项内，该元素可以具有 data-filter="true" 属性自动创建过滤器搜索输入。这是一个例子:

    <ul data-role="listview" data-filter="true" id="outer-ul">
        <li>
            <div data-role="collapsible" data-content-theme="c">
                <h3>Firs Collapsed list</h3>
                <ul>
                    <li><a href="index.html">Acura</a></li>
                    <li><a href="index.html">Audi</a></li>
                    <li><a href="index.html">BMW</a></li>
                </ul>
            </div>
        </li>
    </ul>

这是一个演示:http://jsfiddle.net/Awg8W/2/

请注意，您必须处理一些 CSS 问题。其中之一是拥有内部 data-role="listview" 元素会创建多个搜索输入。我用这个 CSS 隐藏了除第一个之外的所有内容:

#page .ui-listview-filter:nth-child(n+2) {
    display : none;
}​

更新

然后您可以使用以下 jQuery 代码复制 Accordion 效果:

//wait for page to initialize
$(document).on('pageinit', '#page', function () {

    //find the headings we want to watch
    $(this).find('#outer-ul').find('.ui-collapsible-heading').on('click', function () {

        //cache the parent collapsible widget
        var that = $(this).closest('.ui-collapsible')[0];

        //collapse all other collapsible widgets
        $(this).closest('ul').find('.ui-collapsible').filter(function () {

            //filter-out the collapsible widget that got clicked, so it functions
            return this !== that;
        }).trigger('collapse');

        //since we are messing around with the listview widget, let's refresh it
        $(this).closest('ul').trigger('refresh');
    });
});​​