当您单击.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/
更新的JSFiddle：https ://jsfiddle.net/dkg7tyu0/5/
更新显然iOS无法使用，on('click'')但是添加以下代码将使我成为Hello World $('.menuButton').on('touchstart click', function(){ alert('hello world'); });。坏消息是，将我的代码从更改on('click')为on('touchstart click')不会对删除类产生影响。
试试这个
$(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) {
...
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句