Сбросить сворачиваемый контент jquery listview после запуска фильтра

У меня есть список со сворачиваемым содержимым. Фильтр автоматически разворачивает складной контент. Делается это через джаваскрипт. После сброса фильтра поиска список всех элементов остается расширенным. Как сбросить в исходное состояние (свернутое)?

Вот код: JsFiddle

<script>
    $(document).on('pageinit', function() {

        $("#iamalist").on('updatelayout', function() {

            if (($('#iamalist li').length - $('#iamalist .ui-screen-hidden').length) < $('#iamalist li').length) {
                $('#iamalist li').each(function() {
                    $(this).find('.ui-collapsible-content').removeClass('ui-collapsible-content-collapsed');
                    $(this).find('.ui-icon-plus').addClass('ui-icon-minus');
                    $(this).find('.ui-icon-plus').removeClass('ui-icon-plus');
                });
            }
        });
    });
</script>
<div data-role="content" id="iama">
    <ul data-role="listview" id="iamalist" data-inset='true' data-filter="true" data-filter-placeholder="Search term is...">
        <li>
            <div data-role="collapsible" data-inset='false'>
                 <h3>Title</h3>

                <p>eu</p>
            </div>
        </li>
        <li>
            <div data-role="collapsible" data-inset='false'>
                 <h3>Title</h3>

                <p>tu</p>
            </div>
        </li>
        <li>
            <div data-role="collapsible" data-inset='false'>
                 <h3>Title</h3>

                <p>voi</p>
            </div>
        </li>
        <li>
            <div data-role="collapsible" data-inset='false'>
                 <h3>Title</h3>

                <p>Answer.</p>
            </div>
        </li>
        <li>
            <div data-role="collapsible" data-inset='false'>
                 <h3>Title</h3>

                <p>Answer.</p>
            </div>
        </li>
    </ul>
</div>

listview jquery jquery-mobile jquery-mobile-collapsible
person Apopei Andrei Ionut    schedule 13.03.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать это в одной функции. Вместо updatelayout в списке используйте фильтруемое событие Filter виджета< /сильный>. Это событие срабатывает после каждого действия фильтра. Внутри обработчика проверьте наличие класса .ui-screen-hidden в списке. Если их нет, сверните все складные элементы, в противном случае разверните их.

Сворачиваемый виджет имеет методы для сворачивания и expand, который вы можете использовать.

$("#iamalist").on("filterablefilter", function( event, ui ) {       
    if ($("#iamalist .ui-screen-hidden").length == 0){
       $('#iamalist [data-role="collapsible"]').collapsible( "collapse" );
    } else {
        $('#iamalist [data-role="collapsible"]').collapsible( "expand" );
    }    
});

Обновлен FIDDLE

person ezanker    schedule 13.03.2015