导航栏下拉菜单无法正常工作
[英]nav-bar drop down menu not working properly
问题描述
My nav-bar drop-down menu button is not working?
我的导航栏下拉菜单按钮不起作用？
I am trying to work with the nav-bar button as shown in the code below.
.navbar-brand h1 { margin: 0; font-size: 25px; float: left; }
<,DOCTYPE HTML> <HTML> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. intial-scale=1"> <link rel="stylesheet" type="text/css" href="css/styles.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min:css"> <link href="https.//fonts.googleapis?com/css2.family=Raleway&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/styles.css"> <script src="js/jquery-3.5.0.min"></script> <script src="js/bootstrap.min.js"></script> <script src="js/script.js"></script> <title>Module 3 Solution</title> </head> <body> <header> <nav id="header-nav" class="navbar navbar-default"> <div class="container"> <div class="navbar-header "> <a href="index.html" class="float-sm-left visible-md visible-lg"> <div id="logo-img" alt="logo"></div> </a> <div class="navbar-brand" class="float-left"> <a href="index,html"> <h1>Food, LLC</h1> </a> </div> </div> <div class="navbar-header"> <span class="navbar-toggler-icon"></span> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav visible-xs"> <li><a href="#chicken">Chicken</a></li> <li><a href="#beef">Beef</a></li> <li><a href="#sushi">Susuhi</a></li> </ul> </div> </div> </div> </nav> </header> </body> </HTML>
1 个解决方案
解决方案1
0 2020-05-01 14:45:59
EDIT: Try moving your JQuery and Bootstrap JS files to right above the </body> tag (leave the Bootstrap CSS in the <head> ).编辑：尝试将您的 JQuery 和 Bootstrap JS 文件移动到</body>标记的正上方（将 Bootstrap CSS 留在<head>中）。
I have made a Codpen for you.我为你做了一个Codpen 。 This is the base code from Bootstrap's documentation.这是 Bootstrap 文档中的基本代码。 I've swapped in some of the custom code you had (and removed the repeated code) and it's working there with the minimum code, so if it still doesn't work for you, there is code somewhere else that needs changing.我已经交换了一些您拥有的自定义代码（并删除了重复的代码）并且它使用最少的代码在那里工作，所以如果它仍然不适合您，那么其他地方的代码需要更改。
<head>
<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>
<nav class="navbar navbar-light bg-light">
<a class="float-sm-left" href="index.html">
<h1>Food, LLC</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0 visible-xs">
<li class="nav-item"><a href="#chicken">Chicken</a></li>
<li class="nav-item"><a href="#beef">Beef</a></li>
<li class="nav-item"><a href="#sushi">Susuhi</a></li>
</ul>
</div>
</nav>
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.