Question

所以在这个导航栏中我有2个下拉菜单。一个是当你在移动设备上查看网站时另一个是下拉列表。但这些都行不通。我看了2个小时的解决方案，但还没有...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <script src="scripts/jquery.js"></script>
    <script src="scripts\bootstrap.js"></script>
    <link href="css\bootstrap.css" rel="stylesheet">
    <link href="Styles\main.css rel="stylesheet">
</head>
<body>
    <!--Aanmaken van een navigatiebar -->
    <div class="navbar navbar-default navbar-static-top">
        <div class="container">
            <a href="#" class="navbar-brand">Van Beeck Telecom</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Webshop</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Openingsuren</a></li>
                            <li><a href="#">Route</a></li>
                            <li><a href="#">Contactforumlier</a></li>
                            <li><a href="#">Facebook</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
       </div>
         <div>
            Lorem Ipsum is slechts een proeftekst uit het drukkerij- en    zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van     Letraset vellen met Lorem Ipsum passage
        </div>
    </body>
    </html>

Answer 1

确保加载bootstrap.min.js ... 在模板页脚

中添加一行代码

    <script src="js/bootstrap.min.js"></script>

确保bootstrap.min.js文件位于js文件夹中。

更新

您的代码应如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <script src="scripts/jquery.js"></script>
    <script src="scripts/bootstrap.js"></script>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="Styles/main.css rel="stylesheet">
</head>
<body>
    <!--Aanmaken van een navigatiebar -->
    <div class="navbar navbar-default navbar-static-top">
        <div class="container">
            <a href="#" class="navbar-brand">Van Beeck Telecom</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Webshop</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Openingsuren</a></li>
                            <li><a href="#">Route</a></li>
                            <li><a href="#">Contactforumlier</a></li>
                            <li><a href="#">Facebook</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
       </div>
         <div>
            Lorem Ipsum is slechts een proeftekst uit het drukkerij- en    zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van     Letraset vellen met Lorem Ipsum passage
        </div>
    </body>
    </html>

Answer 2

<script src="scripts\bootstrap.js"></script>

在你的代码中你有错误的标志，在这里输入就像底部一样：

<script src="scripts/bootstrap.js"></script>

Answer 3

您的代码是正确的（它可以在我的计算机上运行）所以我认为问题在javascript文件中。要测试是否是这种情况，请使用以下内容替换脚本和链接标记：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
      rel="stylesheet">

然后，逐个将外部CDN更改为本地文件，发现问题何时发生。

或者，在Google Chrome中，您可以右键单击页面中的任意位置，然后选择“检查”。然后在Developer Tools中，选择Console控制台。检查它是否显示如下：

无法加载资源：net :: ERR_FILE_NOT_FOUND

这表示未加载脚本文件。

最后，您可能在浏览器中禁用了javascript执行。您可以在设置中找到它。

Bootstrap下拉列表不起作用

3 个答案: