如何限制可摺疊項目保持展開狀態，除非我單擊其他可摺疊項目來展開而不是可摺疊項目本身

我正在使用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>

問候

來源

2013-11-15 naki

你要聽點擊.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

來源

2013-11-15 13:27:29 Omar

感謝奧馬爾，它的工作！ :) – naki

如何限制可摺疊項目保持展開狀態，除非我單擊其他可摺疊項目來展開而不是可摺疊項目本身

回答

相關問題