jQuery 找不到元素答案

【问题标题】：jQuery does not find elementsjQuery 找不到元素
【发布时间】：2017-08-30 17:44:20
【问题描述】：

我正在尝试本教程 (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 pull 为空，所以 js 崩溃了。

非常感谢任何提示！

谢谢

EDIT1：感谢您的许多回复。不幸的是，问题还没有解决。调试器发现了很多错误，我都修复了，还是一样的问题。我还不能上传我的页面，但它将成为 www.netboat.com 登陆页面的一部分。这个网站有很多进口，但一切似乎都很好。我基本上只是将 sn-ps 添加到该页面，但 jquery 找不到控件...还有什么建议吗？也许与其他包含的库有一些可能的冲突？

已解决：出于某种原因，使用 jQuery 而不是 $ 有效。

【问题讨论】：

你能为这个问题提供一个工作小提琴吗？
我认为这可能会对您有所帮助：learn.jquery.com/using-jquery-core/document-ready
你能提供一个工作小提琴吗？
代码没问题，检查你的 JS/JQuery 包含
代码在我的 jsfiddle 中运行良好

标签： javascript jquery asp.net null-pointer

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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/

【讨论】：

【解决方案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');
            }
        });

    });

});

【讨论】：