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>

菜单.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 pull是空的，所以 js 崩溃了。

任何提示都非常感谢！

谢谢

编辑1：感谢您的众多回复。不幸的是，这个问题还没有解决。调试器发现了很多错误，我将它们全部修复，仍然是相同的问题。我还不能上传我的页面，但它将成为 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');
}
});
});
});