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在手機上點擊事件

回答

相關問題