jsFiddle jQuery工作...不在本地主機

我有點問題，一直試圖讓我的頭相當一段時間了。通過很多主題搜索，但沒有找到任何幫助我的東西。jsFiddle jQuery工作...不在本地主機

我編輯的的jsfiddle，我發現和設計，讓簡單的切換導航：

唯一的問題是，我試着現在它融入我的網站，但它不工作，我已經把它縮小到只是一個測試頁面，試圖找出問題，但仍然沒有運氣。我使用WAMP服務器進行測試，所有的php和其他javascript工作都正常。

這裏是我的HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>jQuery Test</title> 
     <link rel="stylesheet" href="css/master.css"> 
     <script src="//ajax.googleapis.com/ajax/libs/jquerymin.js" type="text/javascript"></script> 
     <script type="text/javascript" src="script.js"></script> 
    </head> 

<body> 

    <div class="alt-nav"> 
     <h3>Menu</h3> 
      <ul> 
       <li><a href="index.php">News</a></li> 
       <li><a href="about.php">About</a></li> 
       <li><a href="press.php">Press</a></li> 
       <li><a href="gigs.php">Gigs</a></li> 
       <li><a href="music.php">Music</a></li> 
       <li><a href="gallery.php">Gallery</a></li> 
       <li><a href="videos.php">Videos</a></li> 
       <li><a href="shop.php">Shop</a></li> 
       <li><a href="contact.php">Contact</a></li> 
      </ul> 
    </div> 

</body> 
</html>

這裏的外部js文件

的script.js：

$('.alt-nav').click(function() { 
     $('ul').slideToggle(550, 'linear'); 
});?

最後CSS：

.alt-nav { 
    display: block; 
    width: 100%; 
    background: black;  
    border-bottom: 2px solid #F06; 
} 
.alt-nav h3, ul { 
    color: white; 
} 
.alt-nav ul { 
    display: none; 
}

（上行可以沒有或只是刪除，他們都應該工作，這應該隱藏在頁面加載）。

事情在瀏覽器中看起來很好，但它不起作用，它完全是靜態的，就好像它沒有讀取腳本。

有人能幫我解決這個問題嗎？

任何幫助，將不勝感激。謝謝！

來源

2012-10-23 LT86

你檢查過的開發工具的控制檯，看看你所有的腳本都被加載了，如果有錯誤發生？ – j08691

我忘了提及，我的索引實際上是index.php - 我不相信它會導致它沒有保存爲.html文件的問題，但如果我錯了，請糾正我。 – LT86

使用sitesucker（sitesucker.us）下載此頁面：http://jsfiddle.net/liamtarpey/GzkN4/show/result/ – jacktheripper

您正在使用jQuery的無效URL。

如果你想使用谷歌CDN，使用//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js

來源

2012-10-23 12:58:27 Knollbert

這是正確的答案。提交者引用的jQuery庫返回404 ... – pistache

非常感謝！不知道我是如何錯過的:) – LT86

你可以推遲你的腳本，直到window.onload，以確保在你的腳本執行之前加載jQuery。

<script defer="defer" type="text/javascript" src="script.js"></script>

來源

2012-10-23 12:22:56

嗨，謝謝快速回復！我嘗試了以下選項： 1.不幸的是，「推遲」沒有任何區別 2.嘗試添加http：//到谷歌庫，但它仍然沒有找到它 - 然後嘗試下載.min文件 - 無法正常工作 3.我在開發人員工具控制檯中發現以下錯誤： GET http://ajax.googleapis.com/ajax/libs/jquerymin.js 404（Not Found）index.php：7 未捕獲的SyntaxError：意外的令牌？ script.js：3 – LT86

@LiamTarpey不工作？ –

確保'''不在'script.js'文件中，並嘗試將'http：//'前面的jQuery調用。 – Laurence

您script.js正在加載以前您的文檔已準備就緒。

來源

2012-10-23 12:24:50 RASG

謝謝，你會推薦我把它放在哪裏？ – LT86

你需要用你的腳本script.js在$(document).ready()電話：

$(document).ready(function(){ // or $(function(){ 
    $('.alt-nav').click(function() { 
     $('ul').slideToggle(550, 'linear'); 
    }); 
});

這裏是關於.ready() jQuery的API頁面：http://api.jquery.com/ready/

來源

2012-10-23 12:26:07 Laurence

嗨，謝謝我編輯了這個文件，但是它在用戶端沒有任何區別:( – LT86

你的jQuery api路徑沒有解析，請試試'' – Laurence

刪除?符號從您的js文件在準備結束功能。腳本將正常工作爲你將您的代碼

$(document).ready(function(){ 
});

來源

2012-10-23 12:28:25

你的script.js之前您的文檔是衆所周知的DOM解析器被加載。因此，您的選擇器$（'。alt-nav'）返回null，這就是您的事件沒有發生的原因：它綁定到一個空對象。你需要將你的script.js include聲明放在body標籤後面。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>jQuery Test</title> 
     <link rel="stylesheet" href="css/master.css"> 
     <script src="//ajax.googleapis.com/ajax/libs/jquerymin.js" type="text/javascript"> </script> 
    </head> 

<body> 
    <script type="text/javascript" src="script.js"></script> 
    <div class="alt-nav"> 
     <h3>Menu</h3> 
      <ul> 
       <li><a href="index.php">News</a></li> 
       <li><a href="about.php">About</a></li> 
       <li><a href="press.php">Press</a></li> 
       <li><a href="gigs.php">Gigs</a></li> 
       <li><a href="music.php">Music</a></li> 
       <li><a href="gallery.php">Gallery</a></li> 
       <li><a href="videos.php">Videos</a></li> 
       <li><a href="shop.php">Shop</a></li> 
       <li><a href="contact.php">Contact</a></li> 
      </ul> 
    </div> 

</body> 
</html>

另外，刪除？在劇本結束時。js

來源

2012-10-23 12:29:22 pistache

非常感謝，我已經拿出了'？'，並將陳述放在了你建議的地方，但仍然沒有喜樂。 – LT86

我向你保證，如果你運行該代碼有一個工作jQuery，它**將工作。http://ajax.googleapis.com/ajax/libs/jquerymin.js返回一個404錯誤。 – pistache

jsFiddle jQuery工作...不在本地主機

回答

相關問題