数据切换和数据目标不工作Bootstrap 3

xggvc2p6 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(1)|浏览(121)

我正在使用Bootstrap 3.4.1，崩溃不起作用。我正在使用PHPStorm，它不能识别数据切换和数据目标。虽然没有打印错误。

<!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。但是没有响应。

单击按钮前

点击后

此处为导航栏

twitter-bootstrap

来源：https://stackoverflow.com/questions/56207990/data-toggle-and-data-target-not-working-bootstrap-3

1条答案

按热度按时间

xqk2d5yq1#

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

Bootstrap需要首先加载jquery来执行几乎所有的动态活动（在您的示例中，它触发了一个toogle事件）。
除非有特殊的目的，否则最好在头文件中加载css文件，在正文中加载javascript（通常在正文的关闭标签之前）。它使您的页面加载到客户端的浏览器更快。
我注意到你在链接两个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>

赞(0）回复(0）举报 2023-09-28

我来回答

数据切换和数据目标不工作Bootstrap 3

1条答案

相关问题

热门标签

最新问答