Dynamic collapsible动态加载collapsible

最新推荐文章于 2022-03-01 11:59:58 发布

laywl

最新推荐文章于 2022-03-01 11:59:58 发布

阅读量749

点赞数

分类专栏： jquery mobile 文章标签： jquery mobile collapsible

jquery mobile 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<pre name="code" class="html">js:

$(document).on("pageinit", function() {
    var nextId = 1;
    $("#add").click(function() {
        nextId++;
        var content = "<div data-role='collapsible' id='set" + nextId + "'><h3>Section " + nextId + "</h3><p>I am the collapsible content in a set so this feels like an accordion. I am hidden by default because I have the 'collapsed' state; you need to expand the header to see me.</p></div>";
        $("#set").append( content ).collapsibleset('refresh');
    });
    $("#expand").click(function() {
        $("#set").children(":last").trigger( "expand" );
    });
    $("#collapse").click(function() {
        $("#set").children(":last").trigger( "collapse" );
    });
});

html:

<button type="button" data-icon="gear" data-theme="b" data-iconpos="right" data-mini="true" data-inline="true" id="add">Add</button>
<button type="button" data-icon="plus" data-theme="b" data-iconpos="right" data-mini="true" data-inline="true" id="expand">Expand last</button>
<button type="button" data-icon="minus" data-theme="b" data-iconpos="right" data-mini="true" data-inline="true" id="collapse">Collapse last</button>
<div data-role="collapsible-set" data-content-theme="d" id="set">
    <div data-role="collapsible" id="set1" data-collapsed="true">
        <h3>Section 1</h3>
        <p>I'm the collapsible content.</p>
    </div>
</div>

具体查看： http://demos.jquerymobile.com/1.3.1/examples/collapsibles/dynamic-collapsible.html#&ui-state=dialog