如何显示关闭图标时,锡德菜单打开
问题描述:
我已经实现了我的网站上的锡德移动菜单:如何显示关闭图标时,锡德菜单打开
<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();
});
如何在打开/关闭菜单后切换菜单图标?
答
你应该尝试这样的事:
$('#simple-menu').sidr({
onOpen: function(){
// Change the menu icon on open
},
onClose: function(){
// change the menu icon on close
}
});
难道我更换图片或整个跨度? – SearchForKnowledge 2014-10-06 16:07:50
你可以用$('#simple-menu img.mobileMenuIcon')。attr('src','new-image-file')替换图片。 – Monte 2014-10-06 16:10:27
好吧,试试吧,让你知道。谢谢。 – SearchForKnowledge 2014-10-06 16:13:33