Question

我正在使用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。但没有回应。

点击按钮之前

点击后

这是导航栏

Answer 1

工作代码Demo

只需回答您的问题。我在您的代码中发现了一些非常规的东西，使我感到不安。在下面提及他们。第一点将解决您的问题，而其他人则希望您的知识。

Bootstrap需要首先加载jquery来执行几乎所有动态活动（在您的情况下，它会触发一次toogle事件）。
一个好习惯是将标头和javascript中的css文件加载到主体中（通常在关闭主体标签之前），直到不需要特殊用途为止。它使您的页面加载到客户端浏览器的速度更快。
我注意到您正在链接两个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>

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

1 个答案: