删除类在 iOS 上不起作用

当您点击.menuButtonjquery 将添加一个名为active。此 Jquery 代码适用于 Windows 和 Android（iOS 除外）（使用 Chrome 和 Safari 进行测试）。

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/ https://jsfiddle.net/dkg7tyu0/

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

Update显然 iOS 不支持on('click'')但是添加以下代码会给我一个Hello World$('.menuButton').on('touchstart click', function(){ alert('hello world'); });。坏消息是改变我的代码on('click') to on('touchstart click')删除该类不会产生任何影响。

try this

$(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 http://codepen.io/fabiovaz/pen/VaPzqz

我真的认为你的问题是 iOS 上的 $('html').click() ，你可以搜索其他解决方案（如触摸操作）或检查这是否有效$('html').click(function() { alert('hello world'); });

var ua = navigator.userAgent,
        event = (ua.match(/iPad/i)) ? "touchstart" : "click";

$(document).on(event, function (ev) {
    ...
});