removeClass在iOS上不起作用

当你点击.menuButton jquery将添加一个名为active的类。 这个Jquery代码可以在Windows和Android上运行，除了iOS（使用Chrome和Safari进行testing）。

HTML5

 <div class="menuButton"> Menu Button </div> <div class="navmenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Something</a></li> </ul> </div> 

jQuery的

 var removeClassVar = true; $('.menuButton').on('click', function() { $('.navmenu').toggleClass('active'); removeClassVar = false; }); $('.navmenu').on('click', function() { removeClassVar = false; }); $(document).on('click', function() { if (removeClassVar == true) { $('.navmenu').removeClass('active'); } removeClassVar = true; }); 

CSS3

 .menuButton { display:block; cursor:pointer; } .navmenu { display:none; } .navmenu.active { display:block; } 

问题：当你点击.menuButton ，菜单会显示，但是当你点击html ，菜单将不会运行removeClass('active') 。 这个问题只发生在iOS上。

JsFiddle： https ：//jsfiddle.net/dkg7tyu0/

更新JSFiddle： https ：//jsfiddle.net/dkg7tyu0/5/

更新显然iOS不工作与on('click'')但添加下面的代码将得到我一个Hello World $('.menuButton').on('touchstart click', function(){ alert('hello world'); }); 。 坏消息是，将我的代码从on('click')更改为on('touchstart click')对于删除类没有任何影响。

Answer 1

尝试这个

 $(document).ready(function() { var $ua = navigator.userAgent; var $event = ($ua.match(/(iPod|iPhone|iPad)/i)) ? "touchstart" : "click"; $(document).on($event, function(ev) { if ($('.navmenu').hasClass('active')) { $('.navmenu').toggleClass('active'); } }); $('.menuButton').on('click', function(e) { e.stopPropagation(); $('.navmenu').toggleClass('active'); }); }); 

http://codepen.io/fabiovaz/pen/VaPzqz

我真的认为你的问题是$（'html'）。点击（）在iOS上，你可以search其他解决scheme（如触摸动作），或检查这是否工作$('html').click(function() { alert('hello world'); });

 var ua = navigator.userAgent, event = (ua.match(/iPad/i)) ? "touchstart" : "click"; $(document).on(event, function (ev) { ... }); 

Answer 2

你能试试吗？

见这里https://jsfiddle.net/dkg7tyu0/1/

 if (!$('.navmenu').hasClass('active')) { $('.navmenu').addClass('active'); removeClass = false; }