jquery - Sidr 菜单打开时如何显示关闭图标

Question

我在我的网站上实现了 Sidr 移动菜单：

<div class="mMenu mMenuStyle">
    <span class="dummySpan"></span> <!-- DUMMY SPAN TO CENTER IMAGE VERTICALLY -->
    <a id="simple-menu" href="#sidr"><img src="theImages/mobileMenuIcon.png" class="mobileMenuIcon" /></a>
    <div style="float: right; height: 35px; color: #FFF; background: #4cff00; overflow: hidden;">
            <input type="text" value="" placeholder="Search" id="Text1" class="styledTB searchB" />
    </div>
</div>
<div id="sidr">
    <div class="mmItemStyleParent">
        SERVICES
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/home.png" class="mIcon vertAlign mmm1" id="mH1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mH" class="vertAlign mmm">Home</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/MakeAnAppt_icon.png" class="mIcon vertAlign mmm1" id="mMW1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mMW" class="vertAlign mmm">My</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/FindaProvider_icon.png" class="mIcon vertAlign mmm1" id="mFP1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mFP" class="vertAlign mmm">Find a Provider</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/Services_icon.png" class="mIcon vertAlign mmm1" id="mS1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mS" class="vertAlign mmm">Services</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/Locations_icon.png" class="mIcon vertAlign mmm1" id="mL1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mL" class="vertAlign mmm">Locations</span>
    </div>
    <div class="mmItemStyleParent">
        RESOURCES
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/PatientInfo.png" class="mIcon vertAlign mmm1" id="mPI1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mPI" class="vertAlign mmm">Patient Information</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/NewsEvents.png" class="mIcon vertAlign mmm1" id="mNE1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mNE" class="vertAlign mmm">News & Events</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/HealthyLiving.png" class="mIcon vertAlign mmm1" id="mHL1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mHL" class="vertAlign mmm">Healthy Living</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/INTouch.png" class="mIcon vertAlign mmm1" id="mINT1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mINT" class="vertAlign mmm">INTouch Newsletter</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/CareerOps.png" class="mIcon vertAlign mmm1" id="mCO1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mCO" class="vertAlign mmm">Career Opportunities</span>
    </div>
    <div class="mmItemStyleChild">
        <img src="theImages/Policies.png" class="mIcon vertAlign mmm1" id="mP1" /> <img src="theImages/emptyImg.png" class="mSpacerStyle" /><span id="mP" class="vertAlign mmm">Policies</span>
    </div>
</div>

以下 JQuery 切换菜单的打开和关闭：

$(document).ready(function () {
    $('#simple-menu').sidr();
});

打开/关闭菜单后如何切换菜单图标？

Answer 1

你应该尝试这样的事情：

$('#simple-menu').sidr({
   onOpen: function(){
       // Change the menu icon on open
   },
   onClose: function(){
       // change the menu icon on close
   }
});