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

Question

我想检查我的面板是打开还是关闭状态。

我尝试了以下方法：

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

但是什么也没有发生。

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

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

- Daniel Sitarz

---

你应该将答案发布为“答案”，而不是覆盖原始问题。现在这个问题已经没有意义了。 - M4N

请将您的答案发布为一个回答。 - ChrisF

非常抱歉。如果我没记错的话，添加答案到我的问题上出了问题。现在我已经修复了。 :) - Daniel Sitarz

这是我完美的解决方案！！！ 十分感谢Kal - Kristian Antov

Answer 1

你需要做的是使用 hasClass 检查面板是否打开或关闭。

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

- Kal

Answer 2

好的，我找到了这个：

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

所以我需要的是：

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

- Daniel Sitarz

Answer 3

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

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

希望可以帮到您。

- Carol

Answer 4

对于一个“现在检查”检查，我使用了以下代码。

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

如果可以的话，我更喜欢按照被接受的答案中所示的方式绑定事件。

- Marc

Answer 5

我使用的方式如下：

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

- coordinate

---

这并不总是有效，因为有时候“可见性”没有被设置为隐藏，而是“覆盖”。 - Marc

Answer 6

 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>

- Saef Myth

Answer 7

我认为您可能需要使用pagebeforehide或pagehide事件。

在这里查看jquerymobile事件信息。

- mothmonsterman

Answer 8

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

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

第二行返回“true”如果它是打开的，“false”如果它没有。这也让下一个开发人员（或几个月后的你自己）更容易弄清楚你正在做什么。

- Amiga500Kid