Javascript 在下拉响应式菜单栏中不起作用
Posted
技术标签:
【中文标题】Javascript 在下拉响应式菜单栏中不起作用【英文标题】:Javascript doesnt work in dropdown responsive menubar 【发布时间】:2017-04-17 04:12:41 【问题描述】:我是 html、css 和 javascript 的新手,目前我正在尝试创建响应式导航栏,但由于某种原因,当我单击 480 像素的菜单按钮时,下拉菜单栏不会显示。如果有人能找到这个问题的解决方案,我将非常感激。
$(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>
【问题讨论】:
【参考方案1】:右键单击您的解决方案,然后单击管理 Nuget 包。在更新部分更新您的 jquery 包,然后在页面上添加该更新包的引用。
【讨论】:
我已经按照说明进行操作,但出现了另一个问题。下拉菜单只显示了不到一秒钟,黑色层出现并覆盖了下拉菜单。我已经多次尝试编辑和修改代码,但问题仍然存在。我使用括号作为我的代码编辑器。【参考方案2】:您需要添加 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>
【讨论】:
我按照说明操作但仍然无法正常工作,仍然无法打开下拉菜单:(我使用括号作为代码编辑器 @rybee17 :我编辑了答案。首先包含 jquery 库。我很抱歉我的错误。试试这个~ 我已经尝试过了,但不幸的是下拉菜单被拉到了页面底部。我确实刷新了页面,然后菜单栏只显示了不到一秒钟,然后黑色层覆盖了菜单栏。我不知道你的代码编辑器是否存在这个问题,如果你不介意再次尝试代码并查看最新问题,问题就会很清楚。以上是关于Javascript 在下拉响应式菜单栏中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用