jQuery在手机上点击事件

我在手机上遇到JQuery点击事件问题。我搜索了SO以获得答案，并发现了有关在Safari/Chrome等移动浏览器中工作的点击事件的相互矛盾的建议。jQuery在手机上点击事件

下面是我的笔，它是一个更大的项目的片段。这是我为了这篇文章的目的在5分钟内扔在一起的东西。

JS被执行，CSS类在桌面浏览器上切换，但在移动设备上根本不切换。我错过了什么？

谢谢！

HTML

<a href="#" class="btn-navbar-responsive">Menu</a> 
<ul class="navbar-menu navbar-hidden"> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 1</a></li> 
    <li><a href="#">Link 1</a></li> 
</ul> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

$(".btn-navbar-responsive").click(function() { 
    $(".navbar-menu").toggleClass("navbar-hidden navbar-visible"); 
});

CSS

.btn-navbar-responsive { 
    padding: 15px 20px; 
    color: white; 
    text-decoration: none; 
    font-size: 16px; 
    font-family: "Helvetica"; 
    background-color: #50D78B; 
} 


.navbar-visible { 
    -webkit-transition: opacity, ease-in, 350ms; 
    -moz-transition: opacity, ease-in, 350ms; 
    -ms-transition: opacity, ease-in, 350ms; 
    transition: opacity, ease-in, 350ms; 
    -webkit-transition: top, ease-in, 350ms; 
    -moz-transition: top, ease-in, 350ms; 
    ms-transition: top, ease-in, 350ms; 
    transition: top, ease-in, 350ms; 
    top: 10px; 
    opacity: 1; 
    position: relative; 
    z-index: 999; 
} 

.navbar-hidden { 
    -webkit-transition: opacity, ease-in, 350ms; 
    -moz-transition: opacity, ease-in, 350ms; 
    -ms-transition: opacity, ease-in, 350ms; 
    transition: opacity, ease-in, 350ms; 
    -webkit-transition: top, ease-in, 350ms; 
    -moz-transition: top, ease-in, 350ms; 
    -ms-transition: top, ease-in, 350ms; 
    transition: top, ease-in, 350ms; 
    top: 0px; 
    opacity: 0; 
    position: relative; 
    z-index: 999; 
}

来源

2013-09-26 Cole Roberts

请不要链接到代码，有一个语法功能的原因。 –

我的歉意，现在更新。 –

我gotchu brah，刚刚编辑 –

一个简单的解决方法是添加CSS属性：

cursor: pointer;

来源

2013-10-03 22:59:50

-1

尝试。对（），而不是点击（）事件。

http://api.jquery.com/on/

$(".btn-navbar-responsive").on('click', function() { 
    $(".navbar-menu").toggleClass("navbar-hidden navbar-visible"); 
});

来源

2013-09-26 17:25:16 krilovich

不幸的是，这仍然不起作用。它在桌面上运行良好，但不适用于Mobile Safari。 –

你可以试试事件代表团检测触摸事件的这样 //检测触摸支持或不

var event= ('ontouchstart' in document.documentElement) ? "touchstart" : "click";

//委派适当的事件

$(".btn-navbar-responsive").on(event, function() { 
    $(".navbar-menu").toggleClass("navbar-hidden navbar-visible"); 
});

来源

2013-09-26 20:10:36 Rajiv

jQuery在手机上点击事件

回答

相关问题