Collapsible-Set一次扩展多个ListView

Question

我的问题是我使用＆＃34; collapsible-set ＆＃34;一次只打开一个列表视图。但我的代码不起作用。

html的

<div data-role="page" id="personalPage">
    <!-- HEADER -->
    <div data-role="header" id="personalHeader" data-position="fixed">
        <h3>Personal Information</h3>
    </div>

    <!-- CONTENT -->
    <div data-role="content" style="padding: 15px;" id="personalContent">
        <div data-role="collapsible-set">
            <div data-role="collapsible" data-theme="b" data-content-theme="a" data-divider-theme="b" data-collapsed="false">
                <h3>Assured Details</h3>
                    <ul data-role="listview" data-inset="true">
                        <li>
                            <h2>Assured ID:</h2>
                            <label for="text" id="assuredID">-</label>
                        </li>
                        <li>
                            <h2>Name:</h2>
                            <label for="text" id="assName">-</label>
                        </li>
                        <li>
                            <h2>Birth Date:</h2>
                            <label for="text" id="assBirth">-</label>
                        </li>
                        <li>
                            <h2>Address:</h2>
                            <label for="text" id="assAddr" class="wrap">-</label>
                        </li>
                        <li>
                            <h2>Mobile Number:</h2>
                            <label for="text" id="assMob">-</label>
                        </li>
                        <li>
                            <h2>Home Number:</h2>
                            <label for="text" id="assHome">-</label>
                        </li>
                        <li>
                            <h2>FaxNumber:</h2>
                            <label for="text" id="assFax">-</label>
                        </li>
                        <li>
                            <h2>Driver License:</h2>
                            <label for="text" id="assDriveLicen">-</label>
                        </li>
                    </ul>
                </div>

                <div id="assCar">
                </div>
            </div>
        </div>

        <!-- FOOTER -->
        <div data-role="footer" data-position="fixed" id="personalFooter">
            <div data-role="navbar" id="navbar">
                <ul>
                    <li><a href="#homePage" id="Home" data-icon="home" data-iconpos="top">Home</a></li>
                    <li><a href="#policyPage" id="Policy" data-icon="bars" data-iconpos="top">Policy</a></li>
                    <li><a href="#" id="Personal" data-icon="info" data-iconpos="top" class="ui-btn-active ui-state-persist">Personal</a></li>
                    <li><a href="#historyPage" id="History" data-icon="bars" data-iconpos="top">History</a></li>
                </ul>
            </div>
        </div>
    </div>

.js（我动态地将汽车列表视图添加到＆＃34; collapsible-set ＆＃34;。汽车详细信息从数据库中检索。）

function updatePersonalCarUI(tel) {
    //alert("Personal: Update Car");
    for(var i = 0; i < tel.length; ++i) {
        $("#assCar").append('' +
                '<div data-role="collapsible" data-theme="b" data-content-theme="a" data-divider-theme="b">' +
                '<h3>Car#' + (i+1) + '</h3>' +
                    '<ul data-role="listview" data-inset="true">' +
                        '<li>' +
                            '<label for="text"><b>Name:</b></label>' +
                            '<label for="text" class="wrap"><i>&nbsp;&nbsp;' + tel[i].CNAME + '</i></label>' +
                        '</li>' +
                        '<li>' +
                            '<label for="text"><b>License Plate Number:</b></label>' +
                            '<label for="text"><i>&nbsp;&nbsp;' + tel[i].CLICENPLATENUMBER + '</i></label>' +
                        '</li>' +
                        '<li>' +
                            '<label for="text"><b>VIN Number:</b></label>' +
                            '<label for="text" class="wrap"><i>&nbsp;&nbsp;' + tel[i].CVINNUMBER + '</i></label>' +
                        '</li>'+
                    '</ul>' +
                '</div>');      
    }
}

感谢您的解决方案或建议。

Answer 1

您不是将您的汽车附加到可折叠集合，而是将该汽车附加到名为＆＃34; assCar＆＃34;的集合中。相反，您应该将汽车直接附加到可折叠集DIV中，然后刷新可折叠集小部件：

  

这是 DEMO 小提琴

这是标记和脚本：

    <div id="assCarCol" data-role="collapsible-set">
        <div data-role="collapsible" data-theme="b" data-content-theme="a" data-divider-theme="b" data-collapsed="false">
            <h3>Assured Details</h3>
            <ul data-role="listview" data-inset="true">
                <li>
                     <h2>Assured ID:</h2>

                    <label for="text" id="assuredID">-</label>
                </li>
            </ul>
        </div>
    </div>

for (var i = 0; i < 2; ++i) {
    $("#assCarCol").append('' +
        '<div data-role="collapsible" data-theme="b" data-content-theme="a" data-divider-theme="b">' +
        '<h3>Car#' + (i + 1) + '</h3>' +
        '<ul data-role="listview" data-inset="true">' +
        '<li>' +
        '<label for="text"><b>Name:</b></label>' +
        '<label for="text" class="wrap"><i>&nbsp;&nbsp;' + i + '</i></label>' +
        '</li>' +
        '<li>' +
        '<label for="text"><b>License Plate Number:</b></label>' +
        '<label for="text"><i>&nbsp;&nbsp;' + i + '</i></label>' +
        '</li>' +
        '<li>' +
        '<label for="text"><b>VIN Number:</b></label>' +
        '<label for="text" class="wrap"><i>&nbsp;&nbsp;' + i + '</i></label>' +
        '</li>' +
        '</ul>' +
        '</div>');
}

$("#assCarCol").collapsibleset("refresh").enhanceWithin();