1

我浏览了一堆教程，并且在这里阅读了一堆问题的答案。我不知道发生了什么事。我按顺序链接到 bootstrap.css、bootstrap-responsive.css、bootstrap.js、jquery 和 bootstrap-dropdown.js。当我从页面源中单击每个时，它会正确显示。但是，当我单击下拉列表时，什么也没有发生。这是它的html代码：

<!--begin bootstrap navbar-->
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li><a href="/signup/index">Sign Up</a></li>
                <li class="dropdown">
                    <a href="/signup/index" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                         <li><a href="/mypage">my page</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--/end bootstrap navbar-->

如果有人有任何想法，请告诉我。

4

4 回答 4

4

一个非常常见的问题是加载 javascript 文件的顺序。您必须在引导 javascript 文件之前加载 jquery。CSS 文件顺序无关紧要。

编辑

当我复制粘贴您的代码并将此行中的 href 从“/signup/index”更改为“#”时，它起作用了...

<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a>

看... 在此处输入图像描述

引导菜单通过单击（而不是悬停）激活，如果链接实际上指向某个地方，它将跳过下拉菜单并改为导航。

于 2012-07-22T03:20:24.373 回答
1

您应该只链接 bootstrap.js 或 bootstrap-dropdown.js。显然，它会产生一些冲突，因为这是我唯一需要改变的。但是，我以前做过这个没有问题。

于 2012-07-24T15:18:20.517 回答
1

我有一个类似的问题，当我点击它时，导航栏下拉菜单没有反应。我试图在我的设计中采用http://twitter.github.io/bootstrap/examples/starter-template.html 。

最终缺少 jquery.js 的问题。

这是寻找 jquery.js 的代码。

<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>

在我将丢失的 jquery.js 复制到正确的文件夹后，一切正常。

于 2013-04-23T23:49:00.430 回答
0

带有 React 的引导导航栏模板：

移动视图上的下拉菜单没有单击下拉菜单的类似问题..只是缺少我从 w3c 获取的行.. ajax 丢失了。：

参考 ____ https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_collapse&stacked=h

下面的代码在您的 HTML 标头中

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
于 2017-05-04T19:21:11.983 回答