如何顯示關閉圖標時，錫德菜單打開

Question

我已經實現了我的網站上的錫德移動菜單：

<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 
    } 
});