jQuery沒有找到元素

Question

我正在嘗試本教程（http://www.hongkiat.com/blog/responsive-web-nav/）和我的jQuery似乎不能正常工作。

我已經包括在我的aspx頁面的文件：

<script type="text/javascript" language="javaScript" src="/s/js/jquery-3.2.0.min.js"></script> 
<script type="text/javascript" language="javaScript" src="/s/js/menu.js"></script> 

的menu.js很簡單：

$(function() { 
    var pull = $('#pull'); 
    menu = $('nav ul'); 
    menuHeight = menu.height(); 

    $(pull).on('click', function(e) { 
    e.preventDefault(); 
    menu.slideToggle(); 
    }); 

    $(window).resize(function(){ 
    var w = $(window).width(); 
    if(w > 320 && menu.is(':hidden')) { 
    menu.removeAttr('style'); 
    } 
    });  
}); 

而且在我的網頁我得到了，因爲在本教程建議：

<nav class="clearfix"> 
    <ul class="clearfix"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">How-to</a></li> 
    <li><a href="#">Icons</a></li> 
    <li><a href="#">Design</a></li> 
    <li><a href="#">Web 2.0</a></li> 
    <li><a href="#">Tools</a></li> 
    </ul> 
    <a href="#" id="pull">Menu</a> 
</nav> 

我的JS-調試器告訴我，VAR拉爲空，所以js崩潰。

任何提示，非常感謝！

謝謝

EDIT1：謝謝你的回覆。不幸的是，這個問題沒有得到解決。調試器發現了很多錯誤，我將它們全部修復，仍然是同樣的問題。我現在還不能上傳我的頁面，但它將成爲www.netboat.com登錄頁面的一部分。這個網站有很多進口，但一切似乎都很好。我基本上只是將該片段添加到該頁面，但jquery不會找到控件...還有什麼建議？也許與其他包含的庫有可能發生衝突？

解決：出於某種原因使用jQuery而不是$工作。

Answer 1

你的示例代碼似乎很好。檢查您是否指向正確的目錄結構來訪問Jquery和您的本地js文件。

$(function() { 
 
    var pull = $('#pull'); 
 
    menu = $('nav ul'); 
 
    menuHeight = menu.height(); 
 

 
    $(pull).on('click', function(e) { 
 
    e.preventDefault(); 
 
    menu.slideToggle(); 
 
    }); 
 

 
    $(window).resize(function(){ 
 
    var w = $(window).width(); 
 
    if(w > 320 && menu.is(':hidden')) { 
 
    menu.removeAttr('style'); 
 
    } 
 
    });  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="clearfix"> 
 
    <ul class="clearfix"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">How-to</a></li> 
 
    <li><a href="#">Icons</a></li> 
 
    <li><a href="#">Design</a></li> 
 
    <li><a href="#">Web 2.0</a></li> 
 
    <li><a href="#">Tools</a></li> 
 
    </ul> 
 
    <a href="#" id="pull">Menu</a> 
 
</nav>

Answer 2

它的工作實際上是在此的jsfiddle，那麼可能是你失去了一些東西在網頁上。

檢查所有js加載正確，打開devTools並檢查控制檯錯誤。

$(function() { 
 
    var pull = $('#pull'); 
 
    menu = $('nav ul'); 
 
    menuHeight = menu.height(); 
 

 
    $(pull).on('click', function(e) { 
 
    e.preventDefault(); 
 
    menu.slideToggle(); 
 
    }); 
 

 
    $(window).resize(function(){ 
 
    var w = $(window).width(); 
 
    if(w > 320 && menu.is(':hidden')) { 
 
    menu.removeAttr('style'); 
 
    } 
 
    });  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="clearfix"> 
 
    <ul class="clearfix"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">How-to</a></li> 
 
    <li><a href="#">Icons</a></li> 
 
    <li><a href="#">Design</a></li> 
 
    <li><a href="#">Web 2.0</a></li> 
 
    <li><a href="#">Tools</a></li> 
 
    </ul> 
 
    <a href="#" id="pull">Menu</a> 
 
</nav>

Answer 3

我實在不明白什麼是錯的。這裏是一個與菜單的jsfiddle從一開始就

HTML

<nav> 
<ul class="clearfix"> 
<li><a href="#">Home</a></li> 
<li><a href="#">How-to</a></li> 
<li><a href="#">Icons</a></li> 
<li><a href="#">Design</a></li> 
<li><a href="#">Web 2.0</a></li> 
<li><a href="#">Tools</a></li> 
</ul> 
<a href="#" id="pull">Menu</a> 
</nav> 

被關閉

jQuery的

$(function() { 
    var pull = $('#pull'); 
    var menu = $('nav ul'); 
    var menuHeight = menu.height(); 

    menu.hide(); 

    $(pull).on('click', function(e) { 
    e.preventDefault(); 
    menu.slideToggle(); 
    }); 

    $(window).resize(function() { 
    var w = $(window).width(); 
    if (w > 320 && menu.is(':hidden')) { 
     menu.removeAttr('style'); 
    } 
    }); 
    }); 

https://jsfiddle.net/ncsspz8m/1/

Answer 4

嘗試把你的js代碼的文檔準備內部。 Plnkr link

$(function() { 

    $(document).ready(function() { 
     var pull = $('#pull'), 
      menu = $('nav ul'), 
      menuHeight = menu.height(); 

     $(pull).on('click', function(e) { 
      e.preventDefault(); 
      menu.slideToggle(); 
     }); 

     $(window).resize(function() { 
      var w = $(window).width(); 
      if (w > 320 && menu.is(':hidden')) { 
       menu.removeAttr('style'); 
      } 
     }); 

    }); 

});