Question

也许你可以帮助我。我想用javascript内容自动创建 jquerymobile折叠（http://jquerymobile.com/test/docs/content/content-collapsible.html），如下所示：

<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

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

Answer 2

看一下这个页面的源代码，我可以注意到jQuery正在根据点击事件添加和删除类。将您的内容包装到div中并使用jQuery，以dinamically方式添加和删除类。像

这样的东西

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

使用jQuery函数处理折叠标题上的click事件并更改为此

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

这是一个快速的解释，我会用一个小提示来说明这一点;）

Answer 3

对您有所帮助：http://jqueryui.com/accordion/#default。同时我明白，你想创建可折叠的部分。

自动崩溃html内容

3 个答案: