在移動端做了個導航,長這樣 原來結構是用的span <span class="menu_icon"> <img src="img/icon_1.png"> <p>導航</p> </span> 綁定用的是jquery的.click $('.menu_icon').click(function () { ...
在移動端做了個導航,長這樣
原來結構是用的span
<span class="menu_icon"> <img src="img/icon_1.png"> <p>導航</p> </span>
綁定用的是jquery的.click
$('.menu_icon').click(function () { $("#nav-phone").stop().animate({right:"0"},500); }) $('.close').click(function () { $("#nav-phone").stop().animate({right:"-50%"},500); })
然後在移動端,手機自帶瀏覽器都是正常的,但是通過微信自帶瀏覽器打開時,蘋果手機是正常的,部分安卓手機出現問題
導航出現失效情況,而且是有時失效,有時不失效
於是各種盲改,網上各種方法都試遍了,最後終於改好了
改了兩處地方,不確定是哪一處生效了
1、首先是把span標簽換成了a標簽,據說是其他標簽的點擊事件相容不太好啥的
<a class="menu_icon"> <img src="img/icon_1.png"> <p>導航</p> </a>
2、然後是把.click事件改成了 touchstart和click,畢竟在移動端貌似還是touch事件好一點……
$('.menu_icon').on("click touchstart",function () { $("#nav-phone").stop().animate({right:"0"},500); }) $('.close').click(function () { $("#nav-phone").stop().animate({right:"-50%"},500); })