JavaScript不起作用在下拉菜单响应菜单栏

我在html，css和javascript中的新手，目前我试图创建响应式导航栏，但由于某种原因，当我点击480px菜单按钮时，下拉菜单栏不会显示。如果有人能找到解决这个问题的方法，我会非常感激。JavaScript不起作用在下拉菜单响应菜单栏

$(function() { 
 
    menu = $('nav ul'); 
 

 
    $('#openup').on('click', function(e) { 
 
    e.preventDefault(); 
 
    menu.slideToggle(); 
 
    }); 
 

 
    $(window).resize(function() { 
 
    var w = $(this).width(); 
 
    if (w > 480 && menu.is(':hidden')) { 
 
     menu.removeAttr('responsive_navbar'); 
 
    } 
 
    }); 
 

 
    $('nav li').on('click', function(e) { 
 
    var w = $(window).width(); 
 
    if (w < 480) { 
 
     menu.slideToggle(); 
 
    } 
 
    }); 
 
    $('.open-menu').height($(window).height()); 
 
});

body { 
 
    font-family: 'PT Sans Narrow', sans-serif; 
 
    background-color: #eee; 
 
    background-image: url("http://i.cubeupload.com/NjsJx8.png"); 
 
    margin: 0; 
 
} 
 

 
h1 { 
 
    font-size: 4em; 
 
    font-family: 'PT Sans Narrow', sans-serif; 
 
    line-height: 1.1; 
 
    text-align: center; 
 
    padding: 10px; 
 
} 
 

 
p { 
 
    font-size: 1.2em; 
 
    text-align: center; 
 
    padding: 10px; 
 
} 
 

 
nav { 
 
    height: 40px; 
 
    width: 100%; 
 
    background-color: #333; 
 
    color: #eee; 
 
} 
 

 
nav ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
nav li { 
 
    display: inline; 
 
    float: left; 
 
} 
 

 
nav a { 
 
    display: inline-block; 
 
    width: 100px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    padding: 10px 0; 
 
    color: #eee; 
 
    text-decoration: none; 
 
} 
 

 
nav li:hover { 
 
    background-color: #444; 
 
} 
 

 
nav a#openup { 
 
    display: none; 
 
} 
 

 
@media screen and (max-width: 480px) { 
 
    h1 { 
 
    font-size: 2.8em; 
 
    } 
 
    nav { 
 
    height: auto; 
 
    border-bottom: 0; 
 
    } 
 
    nav ul { 
 
    display: none; 
 
    height: auto; 
 
    } 
 
    nav li { 
 
    width: 100%; 
 
    float: left; 
 
    position: relative; 
 
    } 
 
    nav a { 
 
    text-align: left; 
 
    width: 100%; 
 
    text-indent: 25px; 
 
    background: #333; 
 
    border-bottom: 1px solid #555; 
 
    } 
 
    nav a:hover { 
 
    background: #444; 
 
    } 
 
    nav a#openup:after { 
 
    content: "|||"; 
 
    transform: rotate(-90deg); 
 
    -ms-transform: rotate(-90deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(-90deg); 
 
    /* Safari and Chrome */ 
 
    width: 30px; 
 
    height: 30px; 
 
    display: inline-block; 
 
    position: absolute; 
 
    right: 5px; 
 
    top: 20px; 
 
    } 
 
    nav a#openup { 
 
    display: block; 
 
    background-color: #333; 
 
    width: 100%; 
 
    position: relative; 
 
    } 
 
} 
 

 
.cf:before, 
 
.cf:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 

 
.cf:after { 
 
    clear: both; 
 
} 
 

 
.cf { 
 
    zoom: 1; 
 
}

<!DOCTYPE html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Responsive Navbar</title> 
 
    <link rel="stylesheet" href="css/responsive_navbar.css"> 
 
    <script type="text/javascript" href="js/responsive_navbar.js"></script> 
 
</head> 
 
<header> 
 
    <nav class="cf"> 
 
    <ul class="open-menu"> 
 
     <li> 
 
     <a href='#'>Item 0</a> 
 
     </li> 
 
     <li> 
 
     <a href='#'>Item 1</a> 
 
     </li> 
 
     <li> 
 
     <a href='#'>Item 2</a> 
 
     </li> 
 
     <li> 
 
     <a href='#'>Item 3</a> 
 
     </li> 
 
    </ul> 
 
    <a href='#' id='openup'>MENU</a> 
 
    </nav> 
 

 
</header>

来源

2017-04-17 rybee 17

您需要添加jQuery库文件和修复错字（HREF - > SRC）。

<head> 
     <meta charset="utf-8"> 
     <title>Responsive Navbar</title> 
     <link rel="stylesheet" href="css/responsive_navbar.css">   
     <script type="text/javascript" src="js/responsive_navbar.js"> </script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
</head>

编辑

<head> 
     <meta charset="utf-8"> 
     <title>Responsive Navbar</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
     <link rel="stylesheet" href="css/responsive_navbar.css">   
     <script type="text/javascript" src="js/responsive_navbar.js"> </script>   
</head>

来源

2017-04-17 04:49:59

我按照指示，但仍然无法正常工作，仍然无法打开下拉菜单:(即时通讯使用括号作为代码编辑器 –

@ rybee17：我编辑了答案，首先包括jquery库，对不起我的错误，试试这个〜 –

我已经尝试过了，但不幸的是，下拉菜单拉到了页面的底部，我没有刷新页面，然后菜单栏只显示不到一秒钟，然后是覆盖菜单栏的黑色层，我不知道这个问题是否存在你的代码编辑器，如果你不介意再次尝试代码并看到最新的问题，问题就会很明显 –

右键单击您的解决方案，然后单击管理的NuGet包。在更新部分更新你的jquery插件，然后在页面上添加更新的软件包的参考。

来源

2017-04-17 05:01:18

我已经按照说明操作了，但是出现了另一个问题，下拉菜单只显示不到一秒钟，而黑色层出现并覆盖下拉菜单。我一直试图编辑和修改许多代码次，但问题依然存在。我使用括号作为我的代码编辑器。 –

JavaScript不起作用在下拉菜单响应菜单栏

回答

相关问题