Question

有没有办法让jQuery Mobile Collapsible元素在展开另一个可折叠元素时关闭所有其他展开的可折叠元素？

这是因为在我的可折叠列表中，我希望任何时候只展开一个项目。

我查看了文档，并且每当您展开可折叠文件时都会触发一个事件。我将其包含在下面的<script>标记中。我不确定这是否是执行此操作的最佳方式，或者是否有其他简单方法可以执行此操作。而且我也不知道如何遍历文档以关闭所有打开的可折叠文件。

<div data-role="collapsible">
  <h3>Item 1</h3>
  <p>Content 1</p>
</div>
<div data-role="collapsible">
  <h3>Item 2</h3>
  <p>Content 2</p>
</div>
<script>
  $( ".selector" ).collapsible({
      expand: function(event, ui) {
      // code here to close all opened collapsibles, but i need input how to do this
      }
  });
</script>

Answer 1

答案很简单。

jQuery Mobile将视觉地将一组可折叠的样式设置为一个组，并使该集合的行为类似于手风琴，因为如果将可折叠项包装在具有属性data-role的div中，则一次只能打开一个可折叠=＆＃34; collapsibleset＆＃34;

http://api.jquerymobile.com/collapsibleset/

制作最终代码：

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h3>Item 1</h3>
    <p>Content 1</p>
  </div>
  <div data-role="collapsible">
    <h3>Item 2</h3>
    <p>Content 2</p>
  </div>
</div>

多个jQuery Mobile可折叠：任何时候只有一个可折叠打开

1 个答案: