jQuery Mobile 面板 - 检查它是否打开答案

【问题标题】：jQuery Mobile panel - check if it is openjQuery Mobile 面板 - 检查它是否打开
【发布时间】：2013-01-06 01:32:13
【问题描述】：

我正在尝试检查我的面板是打开还是关闭。

我试过这样：

$(document).on('open', '.ui-panel', function(){
   console.log('open');     
})

但什么也没发生。

如何为 jQ 移动面板设置事件监听器？

打开不是问题，因为我只需将.panel('open') 添加到按钮单击然后console.log()，但是关闭呢？当我点击外部时面板会关闭，如何捕捉那个时刻？

【问题讨论】：

您应该将答案发布为“答案”，而不是覆盖原始问题。现在这个问题已经没有意义了。
请将您的答案作为答案发布。
我很抱歉。如果我记得为我自己的问题添加答案有问题。我现在修好了。 :)
stackoverflow.com/a/16513358/4277630 这对我来说是完美的解决方案！！！ 10x 卡尔

标签： jquery mobile panel

【解决方案1】：

我想你可能想要 pagebeforehide 或 pagehide 事件。

See here 获取 jquerymobile 事件信息。

【讨论】：

【解决方案2】：

好的，我找到了这个：

http://api.jquerymobile.com/panel/#event-beforeclose

所以我需要的是：

$( ".selector" ).on( "panelbeforeclose", function( event, ui ) {} );

【讨论】：

【解决方案3】：

我是这样使用的：

if ($("#id").find("div").css("visibility") == "hidden") {
    alert("Closed");
} else {
    alert("Opened");
}

【讨论】：

这并不总是有效，因为有时“可见性”未设置为隐藏但“覆盖”设置为。

【解决方案4】：

$(document).bind('panelopen', function (e, data) {
        $('body').css("overflow", "hidden");
    });

    $(document).bind('panelclose', function (e, data) {
        $('body').css("overflow", "auto");
    });

希望对你有帮助。

【讨论】：

【解决方案5】：

立即检查检查我使用了以下代码。

function isSideNavVisible() {
    var sidenav = $("#sidenav");
    var sideNavHidden = sidenav.css("visibility") == "hidden" || sidenav.css("overflow-x") == "hidden" || sidenav.css("overflow-y") == "hidden";
    return !sideNavHidden;
}

如果可以的话，我更愿意绑定到已接受答案中显示的事件。

【讨论】：

【解决方案6】：

适用于面板的 CSS JQM 明确指示其状态。这是一个非常简单的香草 JS 解决方案：

1 var document.getElementById("name-of-panel") = my_panel;
2 my_panel.classList.contains("ui-panel-open");

第 2 行如果打开则返回“true”，否则返回“false”。下一个开发者（或几个月后的你自己）也更容易弄清楚你在做什么。

【讨论】：

【解决方案7】：

您需要使用hasClass检查面板是打开还是关闭

if( $(".ui-panel").hasClass("ui-panel-open") == true ){
   alert("OPENED");
}else{
   alert("CLOSED");
}

【讨论】：

【解决方案8】：

 function OpenPanel(panel) {
    if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
        $(panel).panel("open");

    }else{
        $(panel).panel("close");
     }
}

用法：

<div onclick='OpenPanel("#ui-panel1");'>Click Here</div>

【讨论】：