jQuery Mobile 可折叠集，如何检查 div 元素是否展开？

Question

我有一个包含两个 block 的可折叠集:

<div data-role="collapsible-set">

    <div data-role="collapsible" data-collapsed="false">
        <h3>Block A</h3>
    </div>

    <div data-role="collapsible">
        <h3>Block B</h3>
    </div>

</div>

我想知道哪个 block 被扩展了。

Answer 1

非常简单。 jQuery Mobile 使用 CSS 完成所有这些工作。当 collapsible UI 元素折叠时，类“ui-collapsible-collapsed”将添加到该元素。因此，您所要做的就是在特定的 collapsible 上使用 jQuery 的 .hasClass() 方法。

例如，下面是一些 HTML:

...
<div id="blocks" data-role="collapsible-set">
    <div class="block" data-role="collapsible" data-collapsed="false">
        <h3>Block A</h3>
    </div>
    <div class="block" data-role="collapsible">
        <h3>Block B</h3>
    </div>
</div>
...

这里是一些 JavaScript/jQuery 示例:

...
if ($('#blocks .block').hasClass('ui-collapsible-collapsed')) {
    // Do whatever you want to do here.
}
...