Collapsible-Set Expand Multiple ListView At A Time

问题

My problem is I use "collapsible-set" to make only one list view open at a time. But my code does not working.

.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 (I dynamically append a car listview into the "collapsible-set". The car details is retrieve from the database.)

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>');      
    }
}

Thank you for your solutions or suggestions.

回答1:

You are not appending your cars to the collapsible set, but rather a child DIV within the set called "assCar". Instead you should append the cars directly into the collapsible set DIV and then refresh the collapsibleset widget:

Here is a DEMO fiddle

Here is the markup and script:

    <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();

来源：https://stackoverflow.com/questions/24557894/collapsible-set-expand-multiple-listview-at-a-time