引导下拉菜单不起作用答案

【问题标题】：Bootstrap dropdowns doesn't work引导下拉菜单不起作用
【发布时间】：2016-04-12 06:06:39
【问题描述】：

所以在这个导航栏中我有 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>

【问题讨论】：

标签： navbar dropdown

【解决方案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>

【讨论】：

如果这个答案有帮助，请接受它是正确的！谢谢！

【解决方案2】：

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

在您的代码中，您的符号有误，请在此处键入底部：

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

【讨论】：

【解决方案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 中，您可以右键单击页面中的任意位置并选择检查。然后在开发人员工具中，选择选项卡控制台。检查它是否显示如下内容：

加载资源失败：net::ERR_FILE_NOT_FOUND

这表明脚本文件没有被加载。

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

【讨论】：