jquery-mobile - jQuery Mobile - 在可折叠集中包括不可折叠元素

Question

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

不幸的是，在我的可折叠套件中包含了一个项目

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

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

有人有想法吗？

Answer 1

1. 那是你要的吗 ？

   提琴手

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

   它可以防止折叠打开

2. 如果您需要可折叠保持在页面加载时的状态，您可以检查可折叠的状态

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

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

   提琴手

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

编辑：正如您在评论中要求的那样，这里是一个带有可折叠标题的JsFiddle，点击时会打开网站，而不是折叠/展开可折叠。

解释 ：

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

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

2）然后当您不希望标题折叠/展开可折叠时添加一个类： class="doNotTriggerCollapsible"

所以你有了 ：

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

3) 然后你用 $(this).data("url") 检索 url 并用

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