javascript - 点击菜单后汉堡菜单不会关闭
问题描述
我的引导汉堡菜单有问题。当我单击菜单时,它会打开以显示其中的链接,但是当我再次单击它或在屏幕上单击时,它不会关闭菜单,我看不出是什么导致它中断。
有没有办法解决它?甚至包括一些 javascript 或 jquery 作为切换关闭或打开的解决方法也会有所帮助。
下面是代码:
<link rel="stylesheet" href="/../style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://js.stripe.com/v3"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="/../#"><img src="../img/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/../#top">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#about">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#courses">OUR COURSES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#services">OUR SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#testimonials">TESTIMONIALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#contact">CONTACT US</a>
</li>
</ul>
</div>
</nav>
</section>
样式.css
/*----------Navigation-------*/
#nav-bar
{
position: sticky;
top: 0;
z-index: 10;
}
.navbar-brand img
{
height: 60px;
width: auto;
padding-left: 30px;
}
.navbar-nav li
{
padding: 0 10px;
}
.navbar-nav li a
{
float: right;
text-align: left;
}
#nav-bar ul li a:hover
{
color: #747c85!important;
}
.navbar
{
background: #fff;
}
.navbar-toggler
{
border: none!important;
}
.nav-link
{
color: #555!important;
font-weight: 600;
font-size: 16px;
}
解决方案
当我将您的代码放入我自己的计算机并检查它时,我发现它正在工作。但问题是我更喜欢在正文标签之间保留引导代码。您的问题可能是由此引起的。选择身体标签而不是头部标签。还要检查您的引导链接。可能不正确。
!!重要的:
可能还有另一个问题。如果您在您的网站上使用媒体查询,请检查导航栏响应部分中的媒体查询。该部分中的样式可能会产生不正确的结果!
/*----------Navigation-------*/
#nav-bar
{
position: sticky;
top: 0;
z-index: 10;
}
.navbar-brand img
{
height: 60px;
width: auto;
padding-left: 30px;
}
.navbar-nav li
{
padding: 0 10px;
}
.navbar-nav li a
{
float: right;
text-align: left;
}
#nav-bar ul li a:hover
{
color: #747c85!important;
}
.navbar
{
background: #fff;
}
.navbar-toggler
{
border: none!important;
}
.nav-link
{
color: #555!important;
font-weight: 600;
font-size: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Website Design</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
>
</head>
<body>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="/../#"><img src="../img/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/../#top">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#about">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#courses">OUR COURSES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#services">OUR SERVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#testimonials">TESTIMONIALS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/../#contact">CONTACT US</a>
</li>
</ul>
</div>
</nav>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
推荐阅读
- python - Python - 执行 exe 文件时出现 pygame 错误
- macos - macOS:使用“security find-internet-password”检索钥匙串项目的密码和用户名
- gcov - 如何使用 gcovr 工具提高分支覆盖率
- html - 如何交换图标的位置和标签的文本
- javascript - Svelte/Sapper:POST 上的身体是空的
- java - 如何在当前片段中使用 FirebaseUI?
- javascript - Internet Explorer 中的 Javascript/Jquery 错误
- javascript - 更改站点标题服务器端
- java - 使用 Java 从目录中读取当前文件和新文件
- slack - 如何使用 slack API 以电子邮件格式上传文件