我的下拉菜单不起作用
My dropdown menu is not working
所以我在 HTMl/CSS 和 Bootstrap 还是个新手。我目前正在尝试在我的网站上实现下拉菜单。我正在使用我在 Bootswatch here 上的主题中的代码。当我点击下拉菜单时，没有任何反应。有谁知道为什么它不起作用？
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Stefan</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="main.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="http://cdn.saldev.nl/js/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="klassenlijst.js"></script>
<script type="text/javascript" src="hamburger.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Stefan Stromberg</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="opleiding.html">CV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Overig</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 40px, 0px);">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3">...</h1>
<p class="lead">Mijn naam is ... Hierbij presenteer ik mijn website en andere projecten!</p>
<hr class="my-4">
<p>Bovenin het menu kunt u mijn CV en Portfolio zien. Neem gerust een kijkje!</p>
</div>
</body>
</html>
据我所知，我在 CSS 中没有做任何可能导致此问题的事情。但是如果你需要的话，这是代码。
.jumbotron {
background-color: whitesmoke;
height: 100%;
}
html, body {
height: 100%;
}
.display-3 {
color: black;
font-family: inherit;
}
.lead {
color: black;
font-family: inherit;
}
p {
color: black;
font-family: inherit;
}
body {
height: 100%;
background-color: whitesmoke;
}
.display-5 {
color: black;
font-family: inherit;
}
li {
color: black;
font-family: inherit;
}
我们有一个漂亮的网站，它不知道当我们点击某些东西时会发生什么。这是我们引入一些 JavaScript 的时候。
在项目主目录下，创建一个单独的js文件（通常叫main.js）。在该文件的内容中，我们将需要一些 jQuery（这是基于您在第 10 行的 CDN 预加载的。
在新文件中我们添加：
$( document ).ready(function() {
$('.dropdown-toggle').dropdown()
});
这是 jQuery 的一个实现，它等待文档加载，然后使用 class 下拉切换监听元素上的点击事件。
现在我们已经为我们的按钮准备好 JS，将文件路径放在一对脚本标签中。我喜欢将它们放在页面底部。
<script src="main.js"></script>
这会将 link 包含我们 JS 的文件添加到我们的页面，以便我们可以对 DOM 上发生的事件做出反应。
可在此处找到有关下拉菜单的更多精彩内容：https://getbootstrap.com/docs/4.0/components/dropdowns/
欢迎来到 Dev 的精彩世界！
包括 jquery 和 bootstrap javascript 库。
.jumbotron {
background-color: whitesmoke;
height: 100%;
}
html, body {
height: 100%;
}
.display-3 {
color: black;
font-family: inherit;
}
.lead {
color: black;
font-family: inherit;
}
p {
color: black;
font-family: inherit;
}
body {
height: 100%;
background-color: whitesmoke;
}
.display-5 {
color: black;
font-family: inherit;
}
li {
color: black;
font-family: inherit;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Stefan</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="main.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="http://cdn.saldev.nl/js/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="klassenlijst.js"></script>
<script type="text/javascript" src="hamburger.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Stefan Stromberg</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="opleiding.html">CV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Overig</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 40px, 0px);">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3">...</h1>
<p class="lead">Mijn naam is ... Hierbij presenteer ik mijn website en andere projecten!</p>
<hr class="my-4">
<p>Bovenin het menu kunt u mijn CV en Portfolio zien. Neem gerust een kijkje!</p>
</div>
</body>
</html>
所以我在 HTMl/CSS 和 Bootstrap 还是个新手。我目前正在尝试在我的网站上实现下拉菜单。我正在使用我在 Bootswatch here 上的主题中的代码。当我点击下拉菜单时，没有任何反应。有谁知道为什么它不起作用？
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Stefan</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="main.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="http://cdn.saldev.nl/js/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="klassenlijst.js"></script>
<script type="text/javascript" src="hamburger.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Stefan Stromberg</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="opleiding.html">CV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Overig</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 40px, 0px);">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3">...</h1>
<p class="lead">Mijn naam is ... Hierbij presenteer ik mijn website en andere projecten!</p>
<hr class="my-4">
<p>Bovenin het menu kunt u mijn CV en Portfolio zien. Neem gerust een kijkje!</p>
</div>
</body>
</html>
据我所知，我在 CSS 中没有做任何可能导致此问题的事情。但是如果你需要的话，这是代码。
.jumbotron {
background-color: whitesmoke;
height: 100%;
}
html, body {
height: 100%;
}
.display-3 {
color: black;
font-family: inherit;
}
.lead {
color: black;
font-family: inherit;
}
p {
color: black;
font-family: inherit;
}
body {
height: 100%;
background-color: whitesmoke;
}
.display-5 {
color: black;
font-family: inherit;
}
li {
color: black;
font-family: inherit;
}
我们有一个漂亮的网站，它不知道当我们点击某些东西时会发生什么。这是我们引入一些 JavaScript 的时候。
在项目主目录下，创建一个单独的js文件（通常叫main.js）。在该文件的内容中，我们将需要一些 jQuery（这是基于您在第 10 行的 CDN 预加载的。
在新文件中我们添加：
$( document ).ready(function() {
$('.dropdown-toggle').dropdown()
});
这是 jQuery 的一个实现，它等待文档加载，然后使用 class 下拉切换监听元素上的点击事件。
现在我们已经为我们的按钮准备好 JS，将文件路径放在一对脚本标签中。我喜欢将它们放在页面底部。
<script src="main.js"></script>
这会将 link 包含我们 JS 的文件添加到我们的页面，以便我们可以对 DOM 上发生的事件做出反应。
可在此处找到有关下拉菜单的更多精彩内容：https://getbootstrap.com/docs/4.0/components/dropdowns/
欢迎来到 Dev 的精彩世界！
包括 jquery 和 bootstrap javascript 库。
.jumbotron {
background-color: whitesmoke;
height: 100%;
}
html, body {
height: 100%;
}
.display-3 {
color: black;
font-family: inherit;
}
.lead {
color: black;
font-family: inherit;
}
p {
color: black;
font-family: inherit;
}
body {
height: 100%;
background-color: whitesmoke;
}
.display-5 {
color: black;
font-family: inherit;
}
li {
color: black;
font-family: inherit;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Stefan</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="main.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="http://cdn.saldev.nl/js/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="klassenlijst.js"></script>
<script type="text/javascript" src="hamburger.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Stefan Stromberg</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="opleiding.html">CV</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Overig</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 40px, 0px);">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3">...</h1>
<p class="lead">Mijn naam is ... Hierbij presenteer ik mijn website en andere projecten!</p>
<hr class="my-4">
<p>Bovenin het menu kunt u mijn CV en Portfolio zien. Neem gerust een kijkje!</p>
</div>
</body>
</html>