Jquerymobile - кнопка для разворачивания/свернуть все

Question

Я пытаюсь сделать в одной функции кнопки, чтобы развернуть или свернуть весь список. Я нашел этот сайт Filterable Opens Matching Collapsibles, но я хочу сделать это одним нажатием кнопки. я попробовать что-то вроде этого:

<script> 
     $(document).on("pagecreate", "#punktyKontrolne", function() { 
      $(document).on("click", ".collapseExpand", function(){ 
       if ($('#listviewContent').hasClass("ui-collapsible-collapsed")){ 
       $('#listviewContent [data-role="collapsible"]').collapsible("option", "collapsed", false); 
       } 
       else { 
       var collapseAll = this.id == "ZwinRozwinWszystko"; 
       $('#listviewContent [data-role="collapsible"]').collapsible("option", "collapsed", collapseAll); 
       } 

      }); 
     }); 
    </script> 

Но это не работает. Только сбой работ (еще в коде).

Спасибо за помощь.

Answer 1

Я написал эту статью, которую вы связали.

Это зависит от ваших конкретных требований. Омар дал хороший ответ на этот веб-сайт, который будет расширяться все если свернуты, в противном случае он будет разрушаться все:

$(document).on("click", ".collapseExpand", function(){ 
    var collapseAll = $('#filterList [data-role="collapsible"] .ui-collapsible-heading-collapsed').length > 0 ? "expand" : "collapse"; 
    $('#filterList [data-role="collapsible"]').collapsible(collapseAll); 
}); 

DEMO

Если с другой стороны, вы просто хотите сделать противоположное действие в последний раз, когда вы нажали кнопку, независимо от того, сколько элементов в настоящее время расширено/сработано, вы можете сохранить предыдущее состояние в атрибуте данных:

$(document).on("click", ".collapseExpand", function(){ 
    var collapseAll = $(this).data("expand") == false ; 
    $('#filterList [data-role="collapsible"]').collapsible("option", "collapsed", collapseAll); 
    $(this).data("expand", collapseAll ? false : true); 
}); 

DEMO

Наконец, если вы хотите, чтобы все рухнуло элементы для расширения и все расширили элементы рухнут, другими словами, каждый элемент переворачивает его текущее расширенное состояние:

$(document).on("click", ".collapseExpand", function(){ 
    $('#filterList [data-role="collapsible"]').each(function(idx){ 
     $(this).collapsible("option", "collapsed", $(this).find('.ui-collapsible-heading-collapsed').length > 0 ? false : true); 
    }); 
}); 

DEMO