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

当侧边栏菜单面板（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');
        }

    });

---

jQM面板小部件公开打开和关闭事件

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

$(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>  

$（document）.on（“pagecreate”，“#page1”，function（）{
$（“#导航”）。在（“面板打开”，功能（事件，用户界面）{
$（“.header菜单图标”）.removeClass（“ui图标栏”）.addClass（“ui图标删除”）；
});
$（“#导航”）。在（“面板关闭”，功能（事件，用户界面）{
$（“.header菜单图标”）.removeClass（“ui图标删除”）.addClass（“ui图标栏”）；
});
});
我的页面

如果您希望更改图像，请执行以下操作：

---

是什么触发了这一切？我会把它绑定到小组活动的开幕式上。