响应式下拉菜单未呈现答案

【问题标题】：Responsive drop down menu not rendering响应式下拉菜单未呈现
【发布时间】：2014-03-10 23:23:01
【问题描述】：

我正在尝试为我的网页创建一个响应式下拉导航菜单。我已经有一个可用的下拉菜单，但我想制作它，以便当屏幕达到一定大小时，我的菜单项会出现一个☰ 图标。但是，当我测试这个（通过重新调整浏览器大小）时，我只看到我的下拉菜单显示为一个块元素，而 ☰ 图标没有显示。这是我的代码：

http://jsfiddle.net/Lwdc4/

我的 JavaScript 代码位于外部文件中。这是文件的样子：

$("#nav").addClass("js").before('<div id="menu">&#9776; </div>');
$("#menu").click(function(){
    $("#nav").toggle();

});

$(window).resize(function(){
    if(window.innerWidth > 768){
        $("#nav").removeAttr("style");

    }
});

还有我对 HTML 的导入：

<head>
 <title>Title</title>

    <link rel="stylesheet" type="text/css" href="nav-menu.css"
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="nav-menu.js"></script> 
  </head>

我的代码有什么问题？任何帮助表示赞赏。提前致谢。

【问题讨论】：

你的小提琴确实有效。只需在左侧面板中添加一个 jQuery 版本
@NathanP。我正在使用 chrome，即使使用 jQuery，我也看到了与海报相同的行为。没有☰图标。
@MathewMacLean This 为我工作
@NathanP。你用的是哪个浏览器？
我也在使用 Chrome，但它仍然无法呈现。它适用于小提琴，但不适用于我的浏览器。

标签： javascript jquery html css

【解决方案1】：

需要添加jquery库才能使用$对象

在您的 HTML 中添加这一行以使用它

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

或者直接在jQuery网站http://jquery.com/download/选择你的版本

更新的小提琴： http://jsfiddle.net/Lwdc4/1/

【讨论】：

感谢您的帮助！