jQuery沒有在移動瀏覽器上運行

因此，我正在爲一個網站的移動菜單工作，它似乎像一切運行順利，直到我開始在幾臺設備上測試它。在桌面上調整大小的窗口非常好，但手機正在做一些奇怪的事情。jQuery沒有在移動瀏覽器上運行

看看的的jsfiddle我做：http://jsfiddle.net/Amp3rsand/s9Hpa/2/

它應該給什麼我想要實現的想法。如果你看一下桌面上的那個鏈接，菜單按鈕將切換導航div沒有問題，但我發現，當用IOS6上的iPhone 4查看它時，菜單按鈕只改變到它的懸停狀態並且不執行jQuery的。這與我正在尋找的網站發現的情況是一樣的。

的HTML如下這種結構：

<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
</head> 
<body> 
    <div> 
     <ul id="navigation"> 
      <li id="home" class="current"><a href="#">Home</a></li> 
      ... 
      <li id="contact"><a href="#">Contact</a></li> 
     </ul> 
     <a href="#" id="menu"></a> 
    </div> 
</body>

在桌面網站#menu設置爲顯示：無;並在480px下設置爲顯示：block; #navigation設置爲display：none;除了手機屏幕的重新設定以外，沒有什麼特別的喜好。正如你所看到的，我使用的是來自Google的jQuery 1.10.2。

然後，我試圖使用jQuery在#menu上設置一個點擊事件，它將切換#navigation。這是我當前的代碼是什麼樣子：

$(document).ready(function() { 
    $.fn.slideFadeToggle = function(speed, easing, callback) { 
     return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback); 
    }; 
    $('#menu').click(function() { 
     $('#navigation').slideFadeToggle(); 
    }); 
    $(window).resize(function() { 
     if(window.innerWidth > 500) 
      { 
       $("#navigation").removeAttr("style"); 
      } 
    }); 
});

我覺得我明明做錯事，但我無法弄清楚它是什麼。任何幫助將不勝感激。

它似乎不是slideFadeToggle的錯，我沒有嘗試過，沒有改變就嘗試過。我已經嘗試了一堆jQuery的不同版本，也沒有改變。我已經確保在手機上允許使用javascript。

實際的網站可以在這裏找到：http://www.bridgeport.net.au/new/index.html

你可以看到有一些動畫與標題和字幕，圖像將通過幾個週期。我發現iOS設備（我迄今還沒有能夠在Android上測試）也沒有運行任何這些動畫。

當您調整窗口大小時，桌面上的所有內容都可以正常工作，但某些功能在手機上無法正常工作。即使是主頁上的字幕字體是手機上的不同，他們是在CSS使用@import像這樣谷歌網頁字體：

@import url(http://fonts.googleapis.com/css?family=Raleway:200|Josefin+Slab:400italic);

我想這是與託管服務器出現問題，直到我做了jsFiddle頁面，發現相同的問題。現在我很難過。

編輯：我剛剛在IOS7上測試它在iPhone 5上，發現它是做同樣的事情。

編輯2：我意識到，我是使用jQuery並沒有考慮到的觸摸事件，所以我改變點擊功能：

$('#menu').on('touchstart click', function(){ 
    $('#navigation').slideFadeToggle(); 
});

而且在光標補充說：指針;根據我在堆棧溢出時發現的一些建議來到#menu。

據我所知，仍然沒有改變。新的小提琴可以在這裏找到：http://jsfiddle.net/Amp3rsand/s9Hpa/14/

來源

2013-12-13 Ampersand

而不是this.animate做$（this）.animate，看看這是否工作。我沒有iPhone，但我測試了它在Android默認瀏覽器和鉻（對於Android），它的工作原理。

來源

2013-12-13 02:38:03 nur

有趣的是，感謝您的幫助。我只是測試它，發現它不適用於我的iPhone Safari或鉻仍然工作。在更改之前它是否在android瀏覽器上工作？ – Ampersand

沒有。它沒有在改變之前工作 – nur

jQuery沒有在移動瀏覽器上運行

回答

相關問題