如何隐藏可折叠的标题时，可折叠的内容显示在Jquery移动

How to hide collapsible-header when collapsible-content is displayed in Jquery Mobile?

本文关键字：可折叠 显示 移动 Jquery 标题 何隐藏 隐藏      更新时间：2023-09-26

我正在开发Jquery Mobile，我正在使用可折叠集。当我点击h3时，就会显示可折叠内容。这是预先定义的。但我需要的是，当我点击h3(动物)，然后h3应该被隐藏，只有ul应该显示(猫)。同样，如果我单击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>

正如@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上的click handler处理展开h3时隐藏CC_4的工作;然后下一个处理程序利用其中的IF条件。

通过附加到ul[data-role="listview"] img的点击事件，我们可以在jQ中使用一些基本的DOM遍历来找到相关的h3，触发它的点击事件(自动隐藏ul并恢复扩展图标)，然后使其再次可见。

更新:因为这个特殊的可折叠小部件不支持同时打开多个面板，这个答案可能会导致意想不到的结果(即多个隐藏的标题)，当试图在折叠前一个之前展开一个新的。对于没有这种情况的小部件，这可以工作-对于这个小部件，请参阅Omar的答案。

收听collapsibleexpand事件，然后通过添加ui-screen-hidden类隐藏header。要再次显示标题，需要将事件绑定到可折叠的内容。例如，click事件将再次显示标题，并以编程方式将折叠内容。

$(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");
});

只需添加以下CSS:

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

和以下JS:

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

这里有一个参数，这样你就可以验证它是否是你想要的行为。

相关文章：