切换按钮出现，但单击时不切换答案

【问题标题】：Toggle button appears but does not toggle when clicked切换按钮出现，但单击时不切换
【发布时间】：2019-12-23 04:31:21
【问题描述】：

我正在尝试在 Bootstrap 中创建一个切换按钮。在低宽度下，切换按钮确实显示，但是，每当我单击它时它都不会响应。在高宽度下，菜单只显示在右上角，效果很好。

<!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>Welcome</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="styling.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arvo&display=swap" rel="stylesheet">


</head>
<body>
    <video autoplay loop muted id="bgvideo"><source src="videos/Sea%20top%20view.mp4" type="video/mp4"></video>

    <!--Create navigation bar with srollspy-->
    <nav role="navigation" class="navbar navbar-default navbar-fixed-top" id="mynavBar">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand">Company page</a>
                 <button type="button" class="navbar-toggle" data-target="#navbarCollapse" datatoggle="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="navbar-collapse collapse" id="navbarCollapse">
            <ul class="nav navbar-nav pull-right">
                <li class="active"><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#promise">Promise</a></li>
            </ul>
            </div>
        </div>
    </nav>

    <div>
    </div>


    <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/j
query.min.js"></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>

我可以做些什么来不仅显示切换按钮，而且在我点击它时让它显示菜单？

我检查过：

Bootstrap toggle not button does not work 但是，问题在于它不适用于某些宽度。我的一般不工作。

Bootstrap 3.3.2 navbar dropdown menu toggle not clickable on mobile or desktop 建议需要在 Bootstrap 脚本之前包含 jQuery 脚本。但是，我的代码已经是这种情况了。

【问题讨论】：

标签： jquery html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

你忘记在折叠按钮中添加data-toggle="collapse"，像这样

    <nav role="navigation" class="navbar navbar-default navbar-fixed-top" id="mynavBar">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand">Company page</a>
                 <button data-toggle="collapse" type="button" class="navbar-toggle" data-target="#navbarCollapse">
                  <!-- remaining button code -->
                </button>
            </div>
            <!-- your collapse div code -->
        </div>
    </nav>

【讨论】：