javascript - js 中的响应式切换菜单(适用于移动设备)可以在本地工作，但不能在线工作

Question

网站 ba-hit.com(例如，以低分辨率 720px 调整屏幕大小)

我尝试在页脚中加载jquery..在页眉中，到处，但当我点击它时菜单不会出现。

这是代码:

$(function() {
		var pull 		= $('#push');
			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="clearfixx">
    			<a href="#" id="push">&nbsp;&nbsp;<span>Menu</span></a>
    <ul class="clearfixx newmenu">
    	<li><a id="thehome" href="#">&nbsp;</a></li>
    	<li><a id="proj" href="#">&nbsp;</a></li>
    	<li><a id="loca" href="#">&nbsp;</a></li>
    	<li><a id="cterm" href="#">&nbsp;</a></li>
    	<li><a id="deco" href="#">&nbsp;</a></li>
    	<li><a id="rech" href="#">&nbsp;</a></li>
    	<li><a id="part" href="#">&nbsp;</a></li>
    	<li><a id="cont" href="#">&nbsp;</a></li>
    </ul>
    </nav>

我确定这是与某些东西发生冲突，但是什么？

Answer 1

注意:您还应该提供相关的 JavaScript 代码片段，而不是让我们挖掘您网站中的所有代码来试图找出正在发生的事情。你有很多脚本标签。试图找到你想做的事情是一件痛苦的事情。不要让人们深入你的代码来寻找东西。

看起来您有一个脚本，当您单击 #push 元素以显示 #newmenu 元素时，应该触发该脚本。

您通过调用 $('nav ul') 定义菜单变量，然后单击 #push 时，它会调用 $('nav ul') 元素的 .slideToggle。

当我调试您的页面时，在调用加载函数时，拉取和菜单均为null。我不知道页面上的其他脚本在加载期间是否会影响您的 HTML 结构，但是当您的 jQuery 尝试设置事件时，它会为这些变量返回 null，这意味着没有事件触发。 jQuery 很好；其他因素正在影响这些元素或您的页面结构。

最后，您使用的是 NAV 标记，即 HTML5，但您的 DOCTYPE 是 XHTML(不是 HTML5)。