3

我认为这可能与我的代码或 css 有关，但我可以在 JSFiddle 中重现它：

http://jsfiddle.net/kegmT/

<body>
    <div data-role="page" id="index">
        <div style="padding:20px">
            <div>Here's the problem - this dynamicaly populated collapsable set should have rounded corners:</div>
            <div id="output" data-role="collapsible-set" data-inset="true" data-theme="c"></div>
            <div>If I use the same content but do not render it dynamically, it is fine:</div>
            <div id="static" data-role="collapsible-set" data-inset="true" data-theme="c">
                <div data-role="collapsible">
                    <h2>Container 1</h2>
                    <ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d"></ul>
                </div>
                <div data-role="collapsible">
                    <h2>Container 2</h2>
                    <ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d" start="" id="category-0" end="">
                        <li><a onclick="email_choose_template.selectTemplate(0)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 1</h3></a>
                        </li>
                        <li><a onclick="email_choose_template.selectTemplate(1)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 2</h3></a>
                        </li>
                </div>
                <div>Why the difference?</div>
            </div>
</body>

<script>

$('#output').append('<div data-role="collapsible"><h2>Container 1</h2><ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d"></ul></div><div data-role="collapsible"><h2>Container 2</h2><ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d" start="" id="category-0" end=""><li><a onclick="email_choose_template.selectTemplate(0)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 1</h3></a></li><li><a onclick="email_choose_template.selectTemplate(1)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 2</h3></a></li>');

$('#output').trigger('create');

</script>

每当我在可折叠集上运行 trigger('create') 时，它似乎无法标记需要圆角的第一个孩子和最后一个孩子。

有任何想法吗？我已经没有想法了，减去渲染后自己手动应用类..

4

2 回答 2

2

例子：

工作示例：http: //jsfiddle.net/Gajotres/2QMk6/

仅当它们是可折叠集的一部分时，可折叠物才会具有圆形边框。所以在动态创建 2 collapsibless 时还需要动态创建一个 collapsible set。没有它，jQuery Mobile 将创建 2 个基本的可折叠组件，您将它们放在可折叠集合中并不重要。

代码：

Javascript：

$('#output').after('<div id="new-collapsible-set" data-role="collapsible-set" data-inset="true" data-theme="c"><div data-role="collapsible"><h2>Container 1</h2><ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d"></ul></div><div data-role="collapsible"><h2>Container 2</h2><ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d" start="" id="category-0" end=""><li><a onclick="email_choose_template.selectTemplate(0)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 1</h3></a></li><li><a onclick="email_choose_template.selectTemplate(1)" href="javascript:void(0)" style="padding-left:62px"><img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "><h3 style="font-size:12px;">Template 2</h3></a></li></div></div>');

$('#index').trigger('create');

HTML：

<body>
    <div data-role="page" id="index">
        <div data-role="content">
            <div style="padding:20px">
                <div>Here's the problem - this dynamicaly populated collapsable set should have rounded corners:</div>
            </div>
            <div id="output">If I use the same content but do not render it dynamically, it is fine:</div>
            <div id="static" data-role="collapsible-set" data-inset="true" data-theme="c">
                <div data-role="collapsible">
                    <h2>Container 1</h2>
                    <ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d"></ul>
                </div>
                <div data-role="collapsible">
                    <h2>Container 2</h2>
                    <ul data-role="listview" data-filter="true" data-filter-theme="c" data-divider-theme="d" start="" id="category-0" end="">
                        <li>
                            <a onclick="email_choose_template.selectTemplate(0)" href="javascript:void(0)" style="padding-left:62px">
                                <img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "/>
                                <h3 style="font-size:12px;">Template 1</h3>
                            </a>
                        </li>
                        <li>
                            <a onclick="email_choose_template.selectTemplate(1)" href="javascript:void(0)" style="padding-left:62px">
                                <img src="../../images/email_icon.png" style="width:40px; height:42px; float:left; margin-left:10px; margin-top:4px; "/>
                                <h3 style="font-size:12px;">Template 2</h3>
                            </a>
                        </li>
                    </ul>
                </div>
                <div>Why the difference?</div>
            </div>
        </div>            
    </div>        
</body>
于 2013-05-24T18:24:45.057 回答
2

data-role=collapsible-set接受refresh动态添加元素的方法，这种方式。

$('.selector').collapsibleset('refresh');

请注意，这refresh不适用于data-role=collapsible.

演示

参考：可折叠集 API

于 2013-05-24T18:30:47.053 回答