数据切换和数据目标不起作用 BootStrap 3答案

【问题标题】：data toggle and data target not working BootStrap 3数据切换和数据目标不起作用 BootStrap 3
【发布时间】：2019-10-06 01:25:57
【问题描述】：

我正在使用 BootStrap 3.4.1 并且折叠不起作用。我正在使用 PHPStorm，它无法识别数据切换和数据目标。虽然没有错别字。

我正在从 PluralSight 学习引导程序。尝试了来自不同网站的解决方案，包括 w3schools 和 stackoverflow。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width , initial-scale=1" />
    <title>TESTING</title>

    <script src="../js/bootstrap.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">


</head>

<body>
<div class="navbar navbar-default">
    <div class="navbar-header">
        <button class="btn btn-success navbar-toggle collapsed"
                data-toggle="collapse" data-target=".navbar-collapse">
            <span class="glyphicon glyphicon-chevron-down"></span>
        </button>
    </div>
    <div id="MINE" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="nav"> <a href="Home.html">Home</a> </li>
            <li class="nav"> <a href="About.html">About</a></li>
            <li class="nav"> <a href="Books.html">Books</a></li>
            <li class="nav"> <a href="Films.html">Films</a></li>
            <li class="nav"> <a href="Contact.html">Contact</a></li>
        </ul>
    </div>
</div>

</body>
</html>

按钮应该能够显示和折叠类 navbar-collapse。但没有响应。

点击按钮之前

点击后

这是导航栏

【问题讨论】：

标签： html twitter-bootstrap css

【解决方案1】：

工作代码Demo

刚刚解决了您的问题。我在你的代码中发现了一些让我不安的非常规的东西。在下面提到它们。第一点将解决您的问题，而其他人希望您了解。

Bootstrap 需要首先加载 jquery 以执行几乎所有的动态活动（在您的情况下，它触发了一个工具事件）。
最好将 css 文件加载到 header 中，并将 javascripts 加载到 body 中（通常在 body 的结束标记之前），除非需要特定目的。它使您的页面更快地加载到客户端的浏览器中。
我注意到您正在链接两个 js 文件。 “bootstrap.js”和“bootstrap.min.js”。这两个文件都有相同的 javascript 代码，但后面的只是缩小版本。所以只包括其中之一。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width , initial-scale=1" />
    <title>TESTING</title>


   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" />


</head>

<body>
<div class="navbar navbar-inverse">
    <div class="navbar-header">
        <button class="btn btn-success navbar-toggle collapsed"
                data-toggle="collapse" data-target="#MINE">
            <span class="glyphicon glyphicon-chevron-down"></span>
        </button>
    </div>
    <div id="MINE" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="nav"> <a href="Home.html">Home</a> </li>
            <li class="nav"> <a href="About.html">About</a></li>
            <li class="nav"> <a href="Books.html">Books</a></li>
            <li class="nav"> <a href="Films.html">Films</a></li>
            <li class="nav"> <a href="Contact.html">Contact</a></li>
        </ul>
    </div>
</div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>

</body>
</html>

【讨论】：