Jquerymobile - 按钮展开/折叠所有

Jquerymobile - button to expand / collapse all

本文关键字：折叠 按钮 Jquerymobile      更新时间：2023-09-26

我尝试在一键式功能中展开或折叠整个列表。我发现这个网站可过滤打开匹配的可折叠，但我想在一个按钮中做到这一点。我尝试这样的事情：

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

但它不起作用。只有作品折叠（否则在代码中）。

谢谢你的帮助。

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

这取决于您的确切要求。奥马尔在那个网站上给出了一个很好的回应，如果有任何折叠，它将展开所有内容，否则它将全部折叠：

$(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);
});

演示

另一方面，如果您只想执行与上次单击按钮时相反的操作，而不管当前展开/折叠了多少项，则可以将以前的状态保存到数据属性中：

$(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);
});

演示

最后，如果您希望所有折叠的项目都展开，所有展开

的项目都折叠，换句话说，每个项目都会翻转其当前的展开状态：

$(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);
    });
});

演示

相关文章：