jQuery Mobile - 包括不可折叠集中的可折叠元素

Question

在我的列表中，一些元素有子项，有些则没有。这些没有子项的应该作为按钮/链接。

不幸的是包括像我的collapsibleset中的项目

<div data-role="collapsible" data-iconpos="none">
    <h3 >Title</h3>
</div>

并在JS中设置href到需要的链接看起来很棒，但是JQM通过点击它来触发打开/关闭事件。这改变了它的外观，我在元素中的链接不起作用。

有人有想法吗？

Answer 1

1. 这就是你想要的吗？

   JsFiddle

   $("h3").on("click", function(e){
      $(this).parent().collapsible({collapsed: true});
   });
   

   它阻止可折叠打开

2. 如果您需要可折叠以保持状态，那么就是页面 加载后，您可以使用

   检查可折叠的状态

   $(".ui-collapsible").hasClass('ui-collapsible-collapsed')
   

   如果它已经打开则让它打开，如果已经打开则让它关闭 关闭。

   JsFiddle

3. 如果您的折叠中有一个按钮，则可以使用它 标题，并且不希望折叠在您单击时作出反应 按钮但仍在标题上（按钮外）Final 工作例子：JsFiddle

修改：正如您在评论中所要求的那样，这里有一个JsFiddle，其中有一个可折叠标题，可以在点击时打开网站，而不是折叠/展开可折叠网页。

说明：

1）您可以将网址存储在“h2”的属性中，如下所示：

<h2 data-url="google.com"; >google.com</h2> 

2）然后在不希望标题折叠/展开collapsible时添加一个类：class =“doNotTriggerCollapsible”

所以你有：

<h2 class="doNotTriggerCollapsible" data-url="google.com"; >google.com</h2> 

3）然后你用$（this）.data（“url”）检索网址，然后用

打开链接

window.open($(this).data("url"))