Question

<div data-role="collapsible-set">

    <div data-role="collapsible" data-collapsed="false">
        <h3>Section 1</h3>
        <p>I'm the collapsible set content for section 1.</p>
    </div>

    <div data-role="collapsible">
        <h3>Section 2</h3>
        <p>I'm the collapsible set content for section 2.</p>
    </div>        

    <div> <!--I tried this but this only makes simple heading without any background style used for other collapsible section headings-->
        <h3>Read only Section 3</h3>
    </div>        

</div>

使用上面的模式我想在collabsile-set中只使用标题制作一些div，并且由于某些要求，我想让它们不可折叠。如果有人对此有任何了解，请告诉我

Answer 1

内容的崩溃/扩展正在可折叠标题的click处理程序中处理。因此，通过取消绑定click事件，您可以保持手风琴始终展开。

$(".ui-collapsible-heading").unbind("click");

此处的演示 - http://jsfiddle.net/8dLw4/

修改

编辑小提琴，让一些人保持在扩张状态 - http://jsfiddle.net/8dLw4/2/

添加了属性data-allow-collapse。对于要允许折叠的部分，请将其设置为true。对于其他部分false。

以下是完整的源代码：

<!DOCTYPE html> <html> <head> <title>jQuery Mobile Sample</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script> $("#page").live('pageinit', function(event) { $(".ui-collapsible[data-allow-collapse=false]").unbind("expand collapse"); }); </script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> </head> <body> <div data-role="page" id="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <div data-role="collapsible-set"> <div data-role="collapsible" data-collapsed="false" data-allow-collapse="false"> <h3>Section 1-Not allowed</h3> <p> I'm the collapsible set content for section B. </p> </div> <div data-role="collapsible" data-collapsed="false" data-allow-collapse="true"> <h3>Section 2-Allowed</h3> <p> I'm the collapsible set content for section B. </p> </div> <div data-role="collapsible" data-collapsed="false" data-allow-collapse="true"> <h3>Section 3-Allowed</h3> <p> I'm the collapsible set content for section B. </p> </div> <div data-role="collapsible" data-collapsed="false" data-allow-collapse="false"> <h3>Section 4-Not allowed</h3> <p> I'm the collapsible set content for section B. </p> </div> </div> </div> </div> </body> </html>

Answer 2

或者您可以使用此代码，直到分区框角色可用：

<div class="ui-collapsible ui-body-c">
    <h3 class="ui-collapsible-heading">
        <span style="margin:0; cursor:auto;" class="ui-btn ui-corner-top ui-btn-up-a">
            <span class="ui-corner-top ui-corner-bottom" style="display:block; padding: .6em 5px">Title
            </span>
        </span>
    </h3>
    <div class="ui-collapsible-content ui-body-c ui-corner-bottom">
        <div>Content
        </div>
    </div>
</div>

Answer 3

你可以这样做：

$(".ui-collapsible").on("collapsiblecreate", function( event, ui ) {
    $(this).unbind();
});

需要帮助使用jQuery mobile制作不可折叠的部分

3 个答案: