Question

我正在使用Jquery Mobile，我使用的是可折叠集。当我点击h3时，会显示可折叠内容。这是预先定义的。但我需要的是，当我点击h3（动物）时，h3应该被隐藏，只有ul应该被显示（Cats）。同样，如果我点击ul（Cats面板）中的图像，这应该被隐藏，并且应该显示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>

Answer 1

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

$(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的答案。

Answer 2

收听collapsibleexpand事件，然后通过添加ui-screen-hidden类隐藏标题。要再次显示标题，您需要将事件绑定到collapsible的内容。例如。 click事件将再次显示标题，崩溃内容将以编程方式.collapsible("collapse")显示。

$(document).on("collapsibleexpand", "[data-role=collapsibleset]", function (e) {
   // show previously hidden headers
   $(".ui-screen-hidden").removeClass("ui-screen-hidden");
   // hide target collapsible's header
   $("h3", e.target).addClass("ui-screen-hidden");
   // listen to click event on collapsible's content
}).on("click", ".ui-collapsible-content", function () {
   // retrieve parent collapsible 
   var collapsible = $(this).closest(".ui-collapsible");
   // show header
   collapsible.find(".ui-screen-hidden").removeClass("ui-screen-hidden");
   // collapse target collapsible 
   collapsible.collapsible("collapse");
});

<强> Demo

Answer 3

只需添加以下 CSS ：

.ui-collapsible h3 {
    display: none;
}

.ui-collapsible.ui-collapsible-collapsed h3 {
    display: block;
}

以下 JS ：

$(".ui-collapsible-content").click(function(){
    $(this).parent().collapsible("collapse");
});

这是一个fiddle，因此您可以验证它是否是所需的行为。

如何在Jquery Mobile中显示可折叠内容时隐藏collapsible-header？

3 个答案: