Question

这是我的列表视图：https://jsfiddle.net/QkiZ/eu6t61o3/ 它工作得很好，但有一件事并不像jQuery Mobile文档那样工作。 data-role="collapsibleset" shoud只打开一个列表，但我可以在时间打开所有列表。

Answer 1

您正在将可折叠集与列表和一些不可折叠的项混合在一起。这不是jQM直接支持的，您可以添加一个事件处理程序，为您提供所需的功能：

为容器提供一个ID，以便我们在选择器中使用它：

<div data-role="collapsibleset" id="theset">

然后将 expand handler 添加到容器中的所有可折叠内容中。展开商品时， collapse 所有其他不属于此商品的商品：

$('#theset [data-role="collapsible"]').on("collapsibleexpand", function( event, ui ) {
    var that = $(this);        
    $('#theset [data-role="collapsible"]').each(function(idx,elem){
        if (elem != that[0]){
            $(elem).collapsible( "collapse" );
        }
    });
});

更新了 FIDDLE

Answer 2

由于您使用listview作为内容，因此手风琴操作不会折叠其他展开的集合。请参阅示例：http://demos.jquerymobile.com/1.4.4/listview-collapsible-item-indented/

您可以使用JQuery添加此功能，如下所示：

$(document).ready(function(){
    $(".ui-collapsible-heading-toggle").click(function(){
        var item = $(this);
        $("li.ui-collapsible").not(item).collapsible( "collapse" );
    });
});

更新了您的示例：https://jsfiddle.net/eu6t61o3/2/

修改

根据您的评论，很难说出它失败的地方。我会尝试将其移动到您的面板div，如下所示：

<div data-role="panel" data-display="overlay" data-position-fixed="true" id="mypanel"> <script> $(document).ready(function(){ $("#mypanel .ui-collapsible-heading-toggle").click(function(){ var item = $(this); $("#mypanel li.ui-collapsible").not(item).collapsible( "collapse" ); }); }); </script> // Other Panel HTML </div>

jQuery Mobile collapsibleset无法正常工作

2 个答案: