Question

当屏幕尺寸较小时，我点击导航切换按钮时不显示导航菜单。我绞尽脑汁解决这个问题，并认为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>

感谢您的帮助。

Answer 1

你在数据目标上做了一个错字：

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

相反它应该是：

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

bootstrap 3中的导航切换按钮没有下降（Javascript问题？）

1 个答案: