如何在jQuery Mobile中显示可折叠内容时隐藏可折叠标题？

我正在Jquery Mobile上工作，我正在使用可折叠套件。当我点击h3时，可折叠内容就会显示出来。这是预先定义的。但是我需要的是，当我点击h3（动物）时，那么h3应该被隐藏，并且只应该显示ul（猫）。同样，如果我点击ul（Cats面板）中的图像，应该隐藏它，并且应该显示header-h3。我以这种方式拥有大量数据，并希望应用于整个集合。如何在jQuery Mobile中显示可折叠内容时隐藏可折叠标题？

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>

来源

2014-06-14 madhu kumar

你尝试过，如果'<详细信息Open = “”>'会做自己的工作和继电器的javascript只作为备用？ http://www.w3.org/wiki/HTML/Elements/details –

http://jsfiddle.net/K2HQG/3/与基本的'细节'标签 –

为什么你包括细节？我不需要额外的细节标签。在这方面你也失去了手风琴的效果 - 如果一个小组打开另一个应该关闭。 –

-1

只需添加以下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，所以你可以验证它是否是所需的行为。

来源

2014-06-17 13:17:08 falsarella

不错的快速CSS来隐藏点击'h3'，但它没有解决OP的这个要求：“同样，如果我点击ul（猫面板）里面的图像，应该隐藏它，并且应该显示header-h3” – Stevangelista

@Stevangelista谢谢你指出这一点，我已经更新了我的答案，以解决缺少的要求。 – falsarella

作为@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条件。

通过附加到Click事件为您ul[data-role="listview"] img，我们就可以使用一些基本的DOM遍历JQ找到相关h3，触发其碰杯事件（自动隐藏ul和恢复展开图标），然后使它再次可见。

更新：由于此特定的可折叠小部件不支持一次打开多个面板，因此在折叠前一个应用程序之前尝试展开新应用程序时，此答案可能会导致意外结果（即多个隐藏标题）。对于那些不是这种情况的小工具，这可行 - 对于这个小工具，请看奥马尔的答案。

来源

2014-06-17 13:56:27 Stevangelista

我也注意到你可以辩论在第一个点击处理程序中检查'h3'的'.is（'：hidden'）'状态是否值得。这个想法是保存一个不必要的DOM变化（即为什么针对已经隐藏的东西运行'.hide（）'）。因此，如果需要，IF条件可以被移除并且不影响功能。 – Stevangelista

你的答案中有一些错误。如果我点击其他面板，他们都会消失。 –

我的歉意，我没有意识到你正在使用的折叠不支持一次打开多个部分。奥马尔的答案适用于你的用例。 – Stevangelista

收听collapsibleexpand事件，然后通过添加ui-screen-hidden类隐藏标题。要再次显示标题，您需要将事件绑定到可折叠的内容。例如。一个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

来源

2014-06-18 00:10:08 Omar

如何在jQuery Mobile中显示可折叠内容时隐藏可折叠标题？

回答

相关问题