jquery mobile 可折叠面板选择器答案

【问题标题】：jquery mobile Collapsible Panel Selectorsjquery mobile 可折叠面板选择器
【发布时间】：2026-01-31 09:00:01
【问题描述】：

我有一个问题，我无法以看似正确的方式解决。

我有一个小提琴可以说明我的问题：

<body>
<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <a href="#" class="ui-btn-left" data-icon="back">BACK</a>
        <h3>
            You Selected
        </h3>
    </div>

    <div data-role="content" id="test-main-container">
        <div data-role="collapsible-set" data-inset="false">

            <div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
                <h3>FROG</h3>
                <ul data-role="listview">
                    <li><a href="#">BULL FROG</a></li>
                </ul>
            </div><!-- /collapsible -->
            <div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
                <h3>TOAD</h3>
                <ul data-role="listview">
                    <li><a href="#">FAT</a></li>
                </ul>
            </div><!-- /collapsible -->
            <div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
                <h3>REPTILE</h3>
                <ul data-role="listview">
                    <li><a href="#">Aardvark</a></li>
                    <li><a href="#">Alligator</a></li>
                    <li><a href="#">Ant</a></li>
                    <li><a href="#">Bear</a></li>
                    <li><a href="#">Beaver</a></li>
                    <li><a href="#">Cougar</a></li>
                    <li><a href="#">Dingo</a></li>
                </ul>
            </div><!-- /collapsible -->

        </div>
    </div>
</div>
</body>

我想做的是将手风琴家庭和手风琴菜单的选项保存在手风琴上。例如，如果我选择选项 BULL FROG

我会有 var selectedAnimal = BULL FROG, selectedFamily = FROG

但是，我无法创建选择器来执行此任务。

【问题讨论】：

标签： jquery css jquery-mobile jquery-mobile-listview jquery-mobile-collapsible

【解决方案1】：

这是一个工作示例：http://jsfiddle.net/Gajotres/4uzKp/

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('click', '[data-role="listview"] li', function(){       
        var selectedAnimal = $(this).find('.ui-btn-text a').text();
        var family = $(this).parent().parent().parent().find('.ui-btn-text').first();
        family.find('span').remove();
        family = family.text();
        alert("Selected animal = " + selectedAnimal + ", selected family = " + family);
    });
});

【讨论】：

就是这样，由于性能原因，我考虑采用不同的方式，但这种方式应该没问题。谢谢！