jQuery Mobile中的可折叠内容

Question

我有一个简单的可折叠内容元素在页面顶部，其中包含一个列表视图。HTML代码可以正常运行。

我的问题是，如果用户打开了可折叠块，我希望当用户离开或返回页面时自动关闭它。可折叠块始终保持为用户离开时的状态-即打开状态。我不知道如何关闭它。我已经搜索了几天，但找不到确切的情况。我发现的大多数解决方案涉及页面的动态加载，对我来说有些过于高级，难以理解。

我知道这可能是一件简单的事情，但我对jquery mobile非常陌生。我不知道如何将代码绑定到HTML元素或放置在哪里，请逐步向我介绍。

有人知道如何做到这一点吗？

- user1204493

Answer 1

在我的 jqm Web 应用中，我通过以下方式以编程方式关闭可折叠块： $('.ui-collapsible').trigger('collapse');

你应该这样绑定 pageshow 事件：

$('#your_page_id').bind('pageshow', function(){

            $('.ui-collapsible').trigger('collapse');

       });  

例如，您可以尝试这个jsFiddle。

- Yann86

---

谢谢你试图帮助我，特别是 jsFiddle 代码。遗憾的是，我仍然无法让它起作用。我的页面打开时，可折叠内容是关闭的。我打开内容并移动到另一页。然后回来，可折叠内容仍然是打开的。我猜我只是不理解它。页面ID是正确的，代码也被粘贴到了正确的位置。不知道还能做什么。我会继续努力学习你提供的内容。再次感谢。- Rachel - user1204493

明白了！ :-) 谢谢！这是我做的：</br>jQuery('#my_page').live('pagehide', function () { $('#closed').trigger('collapse'); });不确定是否应该使用.live还是.bind，但它正在工作。非常感谢您的帮助。哇——我的头因为试图理解这些东西而疼痛。-Rachel - user1204493

Answer 2

这适用于 jQM 1.4：

$('#yourdivId').collapsible('collapse');

一个人可以这样做：

$(document).on("pageshow", "#yourpageId", function () {
  $('#yourdivId').collapsible('collapse');
})

- manitu