自動摺合html內容

Question

也許你可以幫助我。 我想自動創建jquerymobile崩潰（http://jquerymobile.com/test/docs/content/content-collapsible.html）使用JavaScript的內容，就像這樣：

<h3>title 1</h3> 
some text 

<h3>title 2</h3> 
some text 

<h3>title 3</h3> 
some text 

此內容來自JSON，我不能前操縱。
我必須包裝每個：

<h3>title</h3> 
some text 

與此：

<div data-role="collapsible" data-collapsed="true"></div> 

但它不工作...幫助！

Answer 1

它可以幫助你：http://jqueryui.com/accordion/#default。同時我明白，你想創建可摺疊的部分。

Answer 2

看看這個頁面的源代碼，我可以注意到，jQuery是基於點擊事件dinamically添加和刪除類。將你的內容包裝成div和jQuery，然後添加和刪除類。像

<h3 id="collpase-bar" class="collapsed">Collapse Title</h3> 
<div class="collapsible-content hidden">Content</div> 

使用jQuery功能的東西來處理崩潰標題單擊事件，並切換到這個

<h3 id="collapse-bar" class="not-collapsed">Collapse Title</h3> 
<div class="collapsible-content shown">Content</div> 

這是一個簡單的解釋，我要做一個小提琴舉例說;）

Answer 3

的Html

<h3 class="collapse" data-target="content1">Head 1</h3> 
<div class="hidden" id="content1"></div> 

<h3 class="collapse">Head 2</h3> 
<div class="hidden" id="content2"></div> 

<h3 class="collapse">Head 3</h3> 
<div class="hidden" id="content3"></div> 

的JavaScript

$(".collapse").each(function(){ 
    var el = $(this); 
    el.click(function(){ 
     var id = el.attr("data-target"); 
     // files same names with id's 
     $("#"+ id).load("ajax/"+ id +".html"); 
     // or 
     $("#"+ id).load("ajax.php", function(responseText){ 
      $("#"+ id).html(responseText); 
     }); 
    }); 
});