jQuery Mobile collapsibleset не работает

Question

Это мой список: https://jsfiddle.net/QkiZ/eu6t61o3/ Это хорошо работает, но одно не работает, как сказано в jQuery Mobile docs. data-role="collapsibleset" shoud открывать только один список во времени, но я могу открыть весь список на время.

Answer 1

Вы смешиваете складные наборы со списками и некоторыми предметами, которые не являются разборными. Это не поддерживается непосредственно jQM, можно добавить один обработчик событий, который дает вам требуемую функциональность:

Подари контейнер идентификатор, чтобы мы ча использовать его в селекторов:

<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"); 
     } 
    }); 
}); 

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

EDIT

на основе ваших комментариев, это трудно сказать, где он терпит неудачу. Я бы постарался переместить его на вашу панель 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>