javascript - removeClass 不适用于 iOS

Question

当您单击.menuButton 时，jquery 将添加一个名为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/

更新的 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

我真的认为你的问题是 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) {
    ...
});