在导航栏中单击时未打开引导菜单答案

【问题标题】：Bootstrap menu doesn't open on click in Navigation bar在导航栏中单击时未打开引导菜单
【发布时间】：2015-04-04 23:25:40
【问题描述】：

当我“单击”引导菜单时无法打开它。这意味着我看不到其中的任何项目。但是当我从键盘按下“向下键”时，它会立即打开。当我从 xaamp 服务器运行它时尤其如此。但是当我在没有任何服务器的情况下直接在浏览器中打开时，我可以在点击时看到菜单。

我的代码快照如下。我在css和javascripts下面添加了

 <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/isotope.css" media="screen" /> 
        <link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-theme.css">
        <link rel="stylesheet" href="css/style.css">


<div class="navbar navbar-fixed-top" role="navigation" data-0="line-height:100px; height:100px; background-color:rgba(0,0,0,0.3);" data-300="line-height:60px; height:60px; background-color:rgba(0,0,0,1);">
             <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="fa fa-bars color-white"></span>
                    </button>
                    <h1><a class="navbar-brand" href="index.php" data-0="line-height:90px;" data-300="line-height:50px;">           CityMart
                    </a></h1>
                </div>
                <div class="collapse navbar-collapse collapse">
                    <ul class="nav nav-pills">

                        <ul class="nav navbar-nav" data-0="margin-top:20px;" data-300="margin-top:5px;">
                        <li class="active"><a href="admin_index.php">Home</a></li>
                        <!--<li><a href="#section-about">Abut</a></li>
                        <li><a href="#section-works">Portfolio</a></li>-->
                        <li><a href="#section-works">categories</a></li>
                         <li role="presentation" class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="admin_index.php" role="button" aria-expanded="true">
                              Dropdown <strong class="caret"></strong>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="admin_category_insert.php">ADD Category</a></li>
                                <li><a href="admin_category_insert.php">ADD Subcategory</a></li>
                                <li><a href="mall_registration.php">Mall Registration</a></li>
                                <li><a href="shop_in_mall.php">ADD Shops In Mall </a></li>
                            </ul>
                        </li>


                          </li> 
                    </ul>   

                </ul>

                </div><!--/.navbar-collapse -->
            </div>
        </div>

【问题讨论】：

尝试打开浏览器控制台，查看文件链接和导入是否有任何错误。可能有些 JS 没有包含或有错误。

标签： javascript php html css twitter-bootstrap

【解决方案1】：

尝试使用 bootstrap 3.3.4（最新版本）

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.4/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.4/css/bootstrap.min.css">

【讨论】：