Question

当侧边栏菜单面板（ID为 #nav ）打开时，我试图在汉堡菜单图像和十字图像之间切换图标（获得“ .ui-panel-opened “）并关闭（获得” .ui-panel-closed “类）。当侧边栏菜单面板关闭时，图标（其类别为“.header-menu-icon”）将成为汉堡包（ icon-menu.svg ），并交换为十字图标（ icon-close.svg ）通过在打开侧边栏菜单面板时更改图像来源。下面是我的代码，但未成功实现此尝试。非常感谢您的意见和建议。

$( document ).ready(function() {

        if($('#nav').hasClass('ui-panel-open')){
            $( ".header-menu-icon" ).attr("src", 'images/icon-close.svg');
        } else if($('#nav').hasClass('ui-panel-closed')){
            $( ".header-menu-icon" ).attr("src", 'images/icon-menu.svg');
        }

    });

Answer 1

jQM面板窗口小部件公开事件以便打开和关闭

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

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

您可以处理这些事件并相应地更新您的按钮：

$(document).on("pagecreate","#page1", function(){ 

    $("#nav").on( "panelopen", function( event, ui ) {
        $( ".header-menu-icon").removeClass("ui-icon-bars").addClass("ui-icon-delete");
    });

    $("#nav").on( "panelclose", function( event, ui ) {
        $( ".header-menu-icon").removeClass("ui-icon-delete").addClass("ui-icon-bars");
    });

});

<div data-role="page" id="page1">
    <div data-role="panel" id="nav"></div>    
    <div data-role="header">
        <h1>My page</h1> 
         <a  href="#nav" class="header-menu-icon ui-btn ui-icon-bars ui-btn-icon-notext "></a>
    </div>  
    <div role="main" class="ui-content"></div> 
</div>

<强> DEMO

如果您想更改图片：

<强> Image DEMO

打开和关闭侧边栏面板上的jQuery Mobile切换图标

1 个答案: