自动折合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); 
     }); 
    }); 
});