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-debugger告诉我 var pull 为空，因此js崩溃。

非常感谢任何提示！

由于

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

已解决：由于某些原因使用jQuery而不是$ working。

Answer 1

您的示例代码似乎没问题。检查您是否引用了正确的目录结构来访问Jquery和您当地的js文件。

＆＃13;

$(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');
  }
  });     
});

＆＃13;

<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>

＆＃13;

Answer 2

它实际上正在处理这个jsfiddle，所以可能是你在页面上遗漏的东西。

检查所有j是否正确加载，打开devTools并检查控制台错误。

＆＃13;

$(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');
  }
  });     
});

＆＃13;

<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>

＆＃13;

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');
            }
        });

    });

});

jQuery没有找到元素

4 个答案: