引导程序 3 中的导航切换按钮不下拉（Javascript 问题？）答案

【问题标题】：Navigation toggle button in bootstrap 3 not dropping down (Javascript issue?)引导程序 3 中的导航切换按钮不下拉（Javascript 问题？）
【发布时间】：2017-06-12 18:33:31
【问题描述】：

在缩小屏幕尺寸后，当我单击导航切换按钮时，它不会显示导航菜单。我绞尽脑汁想解决这个问题，并认为 JavaScript 不活跃。尽管如此，我仍然无法使其正常工作。

JQuery 正在运行，并已放在 JavaScript 之前。我已经尝试了指向 JS 的网络链接，但这似乎不起作用。我已经尝试移动我文件夹中的 JS 文件，但这似乎又不起作用。

代码如下，

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<style>

.navbar-brand {font-size:180%;}

.myImage {width:100%;
       height:600px;
       background-size:cover;}

.background {background-color:black;}

</style>
</head>
<body>

<div class="navbar navbar-default">

<div class="container">

    <div class="navbar-header">

        <div class="navbar-brand"></div>


        <!--Nav toggle button on mobile-->

            <button class="navbar-toggle" 
                    data-toggle="collapse" 
                    datatarget=".navbar-collapse">

                <span class="sr-only">Toggle navigation</span>

                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>

    </div>      

            <div class="collapse navbar-collapse">

                <ul class="nav navbar-nav">

                    <li class="active"><a href="">Home</a>
                    <li class=""><a href="">About</a>
                    <li class=""><a href="">Download</a>

                </ul>

                    <!--log in section-->

                <form class="navbar-form navbar-right">

                    <div class="form-group">

                         <input type="email" 
                                placeholder="Email" 
                                class="form-control">
                    </div>

                    <div class="form-group">

                         <input type="password" 
                                placeholder="Password" 
                                class="form-control">

                    </div>

            <button type="button" class="btn btn-success">Log In</button>

                </form>
            </div>

</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

感谢您的帮助。

【问题讨论】：

标签： javascript twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

你在 data-target 上打错了：

<button class="navbar-toggle" 
        data-toggle="collapse" 
        datatarget=".navbar-collapse">

应该是：

<button class="navbar-toggle" 
        data-toggle="collapse" 
        data-target=".navbar-collapse">

【讨论】：