javascript - 当Jquery Mobile中显示可折叠内容时，如何隐藏可折叠标题？

我正在使用Jquery Mobile，正在使用可折叠集。当我单击h3时，将显示可折叠内容。这是预先定义的。但是我需要的是，当我单击h3（Animals）时，h3应该被隐藏并且只有ul应该被显示（猫）。同样，如果我单击ul（“猫”面板）中的图像，则应将其隐藏并显示header-h3。我以这种方式拥有大量数据，并希望应用于整个数据集。

JSFIDDLE

//html
    <div id="list" data-role="collapsibleset" data-inset="false">
        <div data-role="collapsible">
            <h3>Animals</h3>
            <ul data-role="listview" data-inset="false">
                <li><span><img id="image" src="http://lorempixel.com/20/20/"></span>Cats</li>
            </ul>
        </div>

最佳答案

如@falsarella所述，您可以通过CSS实现h3的隐藏，但是在单击图像时要恢复它并隐藏子ul，则需要一些jQuery click处理程序。例：

$(function () {
    $('div[data-role="collapsible"] > h3').click(function() {
        if(!$(this).is(':hidden'))
            $(this).hide();
    });
    $('ul[data-role="listview"] img').click(function() {
        $(this).closest('div[data-role="collapsible"]').children('h3').trigger('click').show();
    });
});

已更新的jsFiddle（由您提供）：http://jsfiddle.net/dBH3h/

div[data-role="collapsible"] > h3上的单击处理程序处理扩展h3时隐藏它的工作；然后，下一个处理程序将利用其中的IF条件。

通过为您的ul[data-role="listview"] img添加click事件，我们可以在jQ中使用一些基本的DOM遍历来找到关联的h3，触发其clink事件（该事件自动隐藏ul并还原展开图标），然后使它再次可见。

更新：由于此特定的可折叠窗口小部件不支持同时打开多个面板，因此在尝试折叠一个新面板之前，此答案可能会导致意外结果（即多个隐藏标题）。对于不是这种情况的小部件，这将起作用-对于此小部件，请查看Omar的答案。

关于javascript - 当Jquery Mobile中显示可折叠内容时，如何隐藏可折叠标题？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24219380/