0

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

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

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

http://codepen.io/anon/pen/FknId

谢谢！

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>

JS

$(".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;
}
4

3 回答 3

0

您可以尝试使用像这样的触摸事件检测的事件委托//检测触摸是否支持

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

//委托合适的事件

$(".btn-navbar-responsive").on(event, function() {
    $(".navbar-menu").toggleClass("navbar-hidden navbar-visible");
});
于 2013-09-26T20:10:36.307 回答
0

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

cursor: pointer;
于 2013-10-03T22:59:50.860 回答
-1

尝试 .on() 而不是 click() 事件。

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

$(".btn-navbar-responsive").on('click', function() {
    $(".navbar-menu").toggleClass("navbar-hidden navbar-visible");
});
于 2013-09-26T17:25:16.287 回答