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>
答
您需要添加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>
答
右键单击您的解决方案,然后单击管理的NuGet包。在更新部分更新你的jquery插件,然后在页面上添加更新的软件包的参考。
+0
我已经按照说明操作了,但是出现了另一个问题,下拉菜单只显示不到一秒钟,而黑色层出现并覆盖下拉菜单。我一直试图编辑和修改许多代码次,但问题依然存在。我使用括号作为我的代码编辑器。 –
我按照指示,但仍然无法正常工作,仍然无法打开下拉菜单:(即时通讯使用括号作为代码编辑器 –
@ rybee17:我编辑了答案,首先包括jquery库,对不起我的错误,试试这个〜 –
我已经尝试过了,但不幸的是,下拉菜单拉到了页面的底部,我没有刷新页面,然后菜单栏只显示不到一秒钟,然后是覆盖菜单栏的黑色层,我不知道这个问题是否存在你的代码编辑器,如果你不介意再次尝试代码并看到最新的问题,问题就会很明显 –