Bootstrap 切换按钮在单击或触摸移动按钮时未打开答案

【问题标题】：Bootstraps toggle button does not open on click or touch on mobile buttonBootstrap 切换按钮在单击或触摸移动按钮时未打开
【发布时间】：2014-03-15 17:13:05
【问题描述】：

我想在 bootstrap 中创建一个导航栏

一切正常，除了一个。当我将浏览器的大小调整为移动设备的宽度并单击切换按钮时，下拉菜单不会打开。

请帮助我。我想要的只是“当我点击堆叠的切换按钮时，我希望下拉菜单打开”。

我还对按钮的 data-toggle 属性中的类和 id 进行了更改。

我已经包含了 jquery、bootstrap js 和 bootstrap css。我已经在下面显示了整个代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Sellr Buyr</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="keywords" content="keywords1, change later">

        <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
        <!-- stylesheets and js paths must be updated later -->

        <link rel="stylesheet" href="_sources/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="_sources/bootstrap/css/bootstrap-theme.css">
        <script src="js/vendor/modernizr-2.7.1.min.js"></script>
        <script src="_sources/bootstrap/js/bootstrap.js"></script>
    </head>
    <body>

        <header>
           <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container"><!--fluid container-->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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 class="navbar-header"><!--nav-header-->
                    <a class="navbar-brand" href="homepage">$ SellrBuyr</a>
                    </div><!--/nav-header-->
                    <div class="collapse navbar-collapse"><!--main-nav-collapse-->
                    <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown"><a href="#">LOGIN<i class="caret"></i></a></li>
                    <li class="dropdown"><a href="#">REGISTER<i class="caret"></i></a></li>
                    <li class="btn-danger"><a href="#">PUBLISH YOUR AD FOR FREE</a></li>
                    </ul>
                    </div><!--/main-nav-collapse-->
                </div><!--/fluid container-->
            </nav>
        </header>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>

    </body>
</html>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

尝试以下代码来包含 jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

更新：

您确定您正确链接了引导 js 文件吗？

从中删除 bootstrap js，尝试在 </body> 之前和 jQuery 库之后添加它们。下面是正确的代码（希望:)）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Sellr Buyr</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="keywords" content="keywords1, change later">

        <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
        <!-- stylesheets and js paths must be updated later -->

        <link rel="stylesheet" href="_sources/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="_sources/bootstrap/css/bootstrap-theme.css">
    </head>
    <body>

        <header>
           <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container"><!--fluid container-->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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 class="navbar-header"><!--nav-header-->
                    <a class="navbar-brand" href="homepage">$ SellrBuyr</a>
                    </div><!--/nav-header-->
                    <div class="collapse navbar-collapse"><!--main-nav-collapse-->
                    <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown"><a href="#">LOGIN<i class="caret"></i></a></li>
                    <li class="dropdown"><a href="#">REGISTER<i class="caret"></i></a></li>
                    <li class="btn-danger"><a href="#">PUBLISH YOUR AD FOR FREE</a></li>
                    </ul>
                    </div><!--/main-nav-collapse-->
                </div><!--/fluid container-->
            </nav>
        </header>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="_sources/bootstrap/js/bootstrap.js"></script>
        <script src="js/vendor/modernizr-2.7.1.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>

    </body>
</html>

【讨论】：

不。还是不行。我还缺少其他东西。
请将其设置为已解决，以便其他用户知道他们是否有类似的问题