如何限制可折叠项目保持展开状态，除非我单击其他可折叠项目来展开而不是可折叠项目本身

Question

我正在使用jquerymobile在移动网站上工作。 我在手风琴中有4个可折叠的物品。我想让其中一个项目保持展开。如果我点击展开的项目，它会折叠（我不想折叠此项目）。 如果我点击任何其他折叠的项目，最后一个扩展项目被折叠（多数民众赞成）。

我会感谢您的帮助。手风琴类别的动态JavaScript代码波纹管式给出：

function create-accordion(categories) 
    { 
     category_array = categories; 
     jQuery.each(categories, function(index, value) 
     { 
      var div = '<div data-role="collapsible" class="custom-collapsible" '; 
      if(index == 0) 
       div += 'data-collapsed="false"'; 
      div += '>'; 

      div += '<h3 style:"padding:0px; margin:0px;"> ' + value.name + '</h3>\ 
         <div class= "collapsable-limit-theme">\ 
          <div data-role="content" style="padding:0px; margin:0px;">\ 
           <div class="ui-grid-c, Grid" id="Grid' + value.id + '">\ 
           </div>\ 
          </div>\ 
         </div>\ 
        </div>'; 

      $($('#accord'), this).append(div); 
     }); 

     $("#accord").collapsibleset("refresh"); 
    } 

和HTML代码

<div id="accord" data-role="collapsible-set" border-radius="0px" > 
     </div> 

问候

Answer 1

你要听点击.ui-collapsible-heading-toggle并检查是否点击了可折叠的或者是折叠或展开。如果折叠折叠，它将有一个类.ui-collapsibe-collapsed。

如果点击展开的可折叠图标，它将防止自己折叠return false，否则它会折叠所有展开的折叠图标。

$(".ui-collapsible-heading-toggle").on("click", function() { 

    // clicked collaspible 
    var collapsible = $(this).closest(".ui-collapsible"); 

    // check if its whether collapsed 
    if (collapsible.hasClass("ui-collapsible-collapsed")) { 

     // collapse expanded collapsibles 
     $(".ui-collapsible").not(collapsible).trigger("collapse"); 
    } else { 
     // keep expanded clicked collapsible as is 
     return false; 
    } 
}); 

Demo