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

我真的认为你的问题是$（＆＃39; html＆＃39;）。在iOS上点击（），你可以搜索其他解决方案（比如触摸操作）或检查这是否有效$('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;
    }

removeClass无法在iOS上运行

2 个答案: