带有子标题的标题的 JQuery Mobile 可折叠集一次只打开一个答案

【问题标题】：JQuery Mobile Collapsible Set with header with subheaders open only one at a time带有子标题的标题的 JQuery Mobile 可折叠集一次只打开一个
【发布时间】：2025-11-23 13:50:01
【问题描述】：

以下是我尝试过的Js fiddle：

My JSFiddle

下面是我的 HTML：

                   <div data-role="collapsible" data-theme="b" data-collapsed="false">
                   <h3>Sell</h3>

                            <div data-role="collapsible" data-theme="c" class="expand-lead">
                                <h3>
                                    <span>Andy Stenberg</span>
                                    <span class="span-confidence" style="background-color:red"></span>
                                </h3>
                                <div>
                                    <span class="collapsible-items">Contact:</span>
                                    <a href="tel:2139090090">(213)909-0090</a>
                                    <br>
                                    <span class="collapsible-items">Location:</span><span class="collapsibleitem-bold">Los Angeles</span>
                                    <div id="confid-sellrate1"></div>
                                </div>
                            </div>

                            <div data-role="collapsible" data-theme="c" class="expand-lead">
                                <h3>
                                    <span>Halle Berry</span>
                                    <span class="span-confidence" style="background-color:orange"></span>
                                </h3>
                                <div>
                                    <span class="collapsible-items">Contact:</span>
                                    <a href="tel:xxxxxxxxxx">(xxx)xxx-xxxx</a>
                                    <br>
                                    <span class="collapsible-items">Location:</span><span class="collapsibleitem-bold">Hollywood Hills,LA</span>
                                    <div id="confid-sellrate2"></div>
                                </div>
                            </div>

                            <div data-role="collapsible" data-theme="c" class="expand-lead">
                                <h3>
                                    <span>Cierra Quigg</span>
                                    <span class="span-confidence" style="background-color:orange"></span>
                                </h3>
                                <div>
                                    <span class="collapsible-items">Contact:</span>
                                    <a href="tel:XXXXXXXXXX">(XXX)XXX-XXXX</a>
                                    <br>
                                    <span class="collapsible-items">Location:</span><span class="collapsibleitem-bold">Burbank</span>
                                    <div id="confid-sellrate3"></div>
                                </div>
                            </div>
                  </div>

                    </div>

谁能帮我让子标题一次只打开一个？

【问题讨论】：

标签： jquery html jquery-ui jquery-mobile jquery-dialog

【解决方案1】：

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

HTML：

<div data-role="collapsible" data-theme="b" class="expand-lead">
    <h3>Sell</h3>    
    <div data-role="collapsible-set" data-theme="b" data-collapsed="false">  
        <div data-role="collapsible" data-theme="c" class="expand-lead">
            <h3>
                <span>Andy Stenberg</span>
                <span class="span-confidence" style="background-color:red"></span>
            </h3>
            <div>
                <span class="collapsible-items">Contact:</span>
                <a href="tel:2139090090">(213)909-0090</a>
                <br/>
                <span class="collapsible-items">Location:</span><span class="collapsibleitem-bold">Los Angeles</span>
                <div id="confid-sellrate1"></div>
            </div>
        </div>
        
        <div data-role="collapsible" data-theme="c" class="expand-lead">
            <h3>
                <span>Halle Berry</span>
                <span class="span-confidence" style="background-color:orange"></span>
            </h3>
            <div>
                <span class="collapsible-items">Contact:</span>
                <a href="tel:xxxxxxxxxx">(xxx)xxx-xxxx</a>
                <br/>
                <span class="collapsible-items">Location:</span><span class="collapsibleitem-bold">Hollywood Hills,LA</span>
                <div id="confid-sellrate2"></div>
            </div>
        </div>
        
        <div data-role="collapsible" data-theme="c" class="expand-lead">
            <h3>
                <span>Cierra Quigg</span>
                <span class="span-confidence" style="background-color:orange"></span>
            </h3>
            <div>
                <span class="collapsible-items">Contact:</span>
                <a href="tel:XXXXXXXXXX">(XXX)XXX-XXXX</a>
                <br/>
                <span class="collapsible-items">Location:</span><span class="collapsibleitem-bold">Burbank</span>
                <div id="confid-sellrate3"></div>
            </div>
        </div>
    </div>
</div>

【讨论】：