javascript - 自动折叠 html 内容

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，动态地添加和删除类。就像是

<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

它可以为您提供帮助：http: //jqueryui.com/accordion/#default。同时我明白，你想创建可折叠的部分。