我试过了大部分的解决方案，但是由于某种原因，它对我不起作用。 这是一个来自bootstrap的简单导航栏。 但当我缩小它的宽度时，切换按钮确实会展开并显示菜单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--Bootstrap css file-->
<link rel="stylesheet" href="./bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img class="logo" src="./img/logo.png" alt="logo"></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mr-auto"></div>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-area">About_Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work-exp">Work_Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#project-area">Projects</a>
</li>
</ul>
</div>
</nav>
</body>
<!-- Jquery js file-->
<script src="./jquery3.5.1.js"></script>
<!--Bootstrap js file-->
<script src="./bootstrap.min.js"></script>
</html>
我认为问题与以下方面有关:
data-target="#navbar"
您应该:
<div class="collapse navbar-collapse" id="navbar">
而不是:
<div class="collapse navbar-collapse" id="navbarNav">
下面是您的代码的一个工作示例:
null
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#"><img class="logo" src="http://via.placeholder.com/100x50" alt="logo"></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<div class="mr-auto"></div>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-area">About_Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#work-exp">Work_Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#project-area">Projects</a>
</li>
</ul>
</div>
</nav>
</body>
</html>