JQuery Mobile 检查一个 Div 是展开还是折叠答案

【问题标题】：JQuery Mobile to check if a Div is Expanded or CollapsedJQuery Mobile 检查一个 Div 是展开还是折叠
【发布时间】：2014-03-07 09:49:31
【问题描述】：

我有一个使用属性 data-role="collapsible" 可折叠的 Div

如何随时检查 Div 是处于折叠模式还是展开模式。我试过了，但它不起作用：

if ($("#hideshow").is(":collapsed"))
   alert("collapsed");

请注意，:visible 将不起作用，因为在这两种状态下可见返回 true。

【问题讨论】：

是否有任何东西表明元素像属性一样被折叠？
同时发布 HTML 代码
不行吗：if (!$("#hideshow").is(":visible")) ???编辑：谢谢您的编辑；）

标签： javascript jquery html css jquery-mobile

【解决方案1】：

这是通过 CSS 完成的。当一个可折叠元素被折叠时，它会添加“ui-collapsible-collapsed”类。使用 .hasClass() 来检查它

if ($("#hideshow").hasClass('ui-collapsible-collapsed')) {
    alert("collapsed");
}

【讨论】：

这里唯一正确的答案 (+1)。如果 OP 提到 jQuery mobile 可能会有所帮助...
@Steven：根据您的建议添加了 JQuery Mobile。

【解决方案2】：

为此使用collapsed option 的getter：

if ($("#hideshow").collapsible("option", "collapsed")) {
  alert("collapsed");
}

【讨论】：

【解决方案3】：

经过测试并且可以正常工作！

 if (metingblok.collapsible( "option", "collapsed") == false ) {
//then it is closed
}

  if (metingblok.collapsible( "option", "collapsed") == true) {
//then it is open
}

【讨论】：

【解决方案4】：

尝试使用：

if ($("#hideshow").attr('data-role')=="collapsible")
    alert("collapsed");

【讨论】：

这个答案是错误的。它总是显示为collapsed。

【解决方案5】：

这样就可以了：

if ($("#hideshow").attr('data-role')=="collapsible") {
  console.log("collapsed");
}

输入您希望处理的任何内容，而不是 console.log。

【讨论】：

这个答案不会起到作用它总是显示为collapsed。

【解决方案6】：

DEMO

您还可以使用数据获取器/设置器功能。

var isCollapsed = $("#hideshow").data('role') == "collapsible";

if (isCollapsed)
       alert("collapsed");

【讨论】：

这个答案是错误的。它总是显示为collapsed；我不确定你的 demo 应该做什么？