Jquerymobile - 展开/折叠所有按钮答案

【问题标题】：Jquerymobile - button to expand / collapse allJquerymobile - 展开/折叠所有按钮
【发布时间】：2016-05-31 21:20:11
【问题描述】：

我尝试使用一个按钮功能来展开或折叠整个列表。我找到了这个网站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>

但它不起作用。仅适用于折叠（代码中的其他内容）。

感谢您的帮助。

【问题讨论】：

标签： javascript button jquery-mobile collapse expand

【解决方案1】：

我写了你链接的那篇文章。

这取决于您的具体要求。 Omar 在该网站上给出了一个很好的回应，如果有任何折叠，它将展开所有，否则它将全部折叠：

$(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

【讨论】：