removeClass无法在iOS上运行 [英] removeClass not working on iOS

问题描述

当您点击 .menuButton 时，jquery将添加一个名为 active 的类。此Jquery代码适用于Windows和Android，但iOS（使用Chrome和Safari测试）除外。

When you click .menuButton jquery will add a class named active. This Jquery code works on Windows and on Android except on iOS (Tested with Chrome and 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上。

Problem: When you click on .menuButton the menu will show, but when you click on html the menu will not run removeClass('active'). This problem only occurs on iOS.

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

JsFiddle: https://jsfiddle.net/dkg7tyu0/

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

Updated JSFiddle: https://jsfiddle.net/dkg7tyu0/5/

更新
显然iOS没有使用 on（'click''）但是添加以下代码将获得Hello World $（'。menuButton'）。on（' touchstart点击'，function（）{alert（'hello world'）;}）; 。坏消息是将我的代码从<'c $ c>更改为（'click'）到 on（'touchstart click'）不会删除课程有所不同。

Update Apparently iOS does not work with on('click'') however adding the following code will get me a Hello World $('.menuButton').on('touchstart click', function(){ alert('hello world'); });. Bad news is that changing my code from on('click') to on('touchstart click') will not make a difference in removing the class.

推荐答案

试试这个

$(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上，您可以搜索其他解决方案（如触摸操作）或检查是否有效 $（'html'）。click（function（）{alert（'hello world'）;}）;

I really think your problems is $('html').click() on iOS, you can search other solutions (like touch actions) or check if this work $('html').click(function() { alert('hello world'); });

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

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

这篇关于removeClass无法在iOS上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！