Question

我正在尝试为我的网页创建一个响应式下拉导航菜单。我已经有了一个工作下拉菜单，但我想这样做，以便当屏幕达到一定的大小时，我得到一个带有菜单项的☰图标。但是，当我测试它时（通过重新调整我的浏览器大小），我只看到我的下拉菜单显示为块元素，并且☰图标不显示。这是我的代码的小提琴：

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>

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

Answer 1

您需要添加jquery库以使用$ object

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

响应下拉菜单无法呈现

1 个答案: