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

Jquerymobile - 按钮展开/折叠所有

1 个答案: