Question

所以我是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;
}

Answer 1

包含jquery和bootstrap javascript库。

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 2

我们有一个漂亮的网站，当我们点击某些内容时，我们不知道该怎么做。这是我们引入一些JavaScript的时候。

在主项目目录中，创建一个单独的js文件（通常称为main.js）。在该文件的内容中，我们将需要一些jQuery（基于您在第10行的CDN预加载。

在新文件中我们添加：

$( document ).ready(function() {
    $('.dropdown-toggle').dropdown()
});

这是jQuery的一个实现，它等待文档加载，然后使用类下拉切换来监听元素上的click事件。

现在我们已经准备好了JS按钮，将文件路径放在一对脚本标签中。我喜欢把它们放在页面的底部。

 <script src="main.js"></script>

这会将文件与我们的JS链接到我们的页面，这样我们就可以对DOM上发生的事件作出反应。

下拉菜单中有更多很酷的内容：https://getbootstrap.com/docs/4.0/components/dropdowns/

欢迎来到Dev的精彩世界！

我的下拉菜单无效

2 个答案: