Question

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

我试过这样：

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

但没有任何反应。

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

打开不是问题，因为我只需将.panel('open')添加到按钮点击，然后添加console.log()，但关闭的是什么？当我点击外面时，面板会关闭，如何抓住那一刻？

Answer 1

您需要检查面板是否使用hasClass

打开或关闭

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

Answer 2

好的，我发现了这个：

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

所以我需要的是：

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

Answer 3

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

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

希望它有所帮助。

Answer 4

我这样用：

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

Answer 5

对于立即检查，请使用以下代码。

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

如果可以的话，我希望绑定到接受的答案中显示的事件。

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>

Answer 7

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

See here用于jquerymobile事件信息。

Answer 8

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

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

第2行如果打开则返回“true”，如果不是则返回“false”。对于下一个开发者（或者几个月内你自己）来说，弄清楚你在做什么也会容易得多。

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

8 个答案: