jQuery没有找到元素

问题描述：

我正在尝试本教程（http://www.hongkiat.com/blog/responsive-web-nav/）和我的jQuery似乎不能正常工作。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而不是$工作。

你能提供一个工作小提琴这个问题吗？ –

我想这可能会帮助你：https://learn.jquery.com/using-jquery-core/document-ready/ – nainy

你能提供一个工作小提琴吗？ –

答

你的示例代码似乎很好。检查您是否指向正确的目录结构来访问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>

答

它的工作实际上是在此的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>

答

我实在不明白什么是错的。这里是一个与菜单的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/

答

尝试把你的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'); 
      } 
     }); 

    }); 

});

jQuery没有找到元素

相关推荐