响应式下拉菜单不呈现

Responsive drop down menu not rendering

本文关键字：下拉菜单 响应      更新时间：2023-09-26

我试图为我的网页创建一个响应式下拉导航菜单。我已经有一个工作的下拉菜单，但我想让它，当屏幕达到一定的大小，我得到一个☰图标与我的菜单项。然而，当我测试这个(通过调整浏览器的大小)，我只看到我的下拉菜单显示为一个块元素，和☰图标没有显示。下面是我的代码:

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

和我的import to 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库来使用$ 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/

相关文章：