包含 bootstrap.js 时，Bootstrap 3.x 导航栏链接无处可去答案

【问题标题】：Bootstrap 3.x navbar links lead nowhere when bootstrap.js is included包含 bootstrap.js 时，Bootstrap 3.x 导航栏链接无处可去
【发布时间】：2013-11-07 21:33:00
【问题描述】：

我一直在尝试让 Bootstrap 3.2 中的响应式导航栏与我的网站一起使用，但奇怪的是它可以完美运行，只要我不包含 bootstrap.js 文件。看到导航栏的“响应”部分（又名汉堡按钮）取决于导航栏折叠时是否存在此文件，即使存在此讨厌的文件，我也希望它能够正常工作。我已经尝试将它放在 head-tag 内和关闭 body-tag 的上方，但没有任何区别（而且我还确保始终将它放在 jquery 下方。）这是我的导航栏：

<body>
<div id="wrapper">
    <div class="container">
        <!-- RAD 1: Navigation -->
        <header class="row">    
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>                      
                    </button>
                    <a class="navbar-brand" href="index.html">Optalux</a>
                </div>
                <div class="collapse navbar-collapse" id="collapse">                
                    <ul class="nav navbar-nav">
                        <li class="dropdown"><a href="om-optalux.html" class="dropdown-toggle" data-toggle="dropdown">Om Optalux</a>
                            <ul class="dropdown-menu">
                                <li><a href="om-optalux.html#personlig-ogonkirurgi">Personlig Ögonkirurgi</a></li>
                                <li><a href="om-optalux.html#medicinsk-verksamhetschef">Medicinsk Verksamhetschef</a></li>
                                <li><a href="om-optalux.html#lediga-tjanster">Lediga Tjänster</a></li>
                            </ul>
                        </li>                           
                    </ul>
                </div>              
            </nav>
        </header>
    </div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>

重复一遍：导航栏在默认模式下可以正常工作（未折叠），只要我不包含 bootstrap.js 文件，但没有它，响应模式将毫无用处。我将非常感谢任何帮助，因为这让我发疯了。

【问题讨论】：

当你使用任何web开发工具查看.js是否被调用时，bootstrap.js文件是否真的被加载了？
问题是包含 bootstrap.js 文件的情况下，我实际上可以单击“汉堡包”按钮并展开菜单（由此我认为它实际上正在加载）但如果我离开它按钮根本不起作用。但是，如果我包含 bootstrap.js 文件，单击任何菜单项（链接）不会将我带到其他页面。
我觉得如果不使用汉堡包按钮，应该去掉折叠菜单的div。
我喜欢汉堡按钮，所以我会继续努力让它发挥作用。 :)

标签： jquery css twitter-bootstrap navbar

【解决方案1】：

从下拉菜单项中删除 class 和 data-toggle 属性：

<ul class="dropdown-menu">
  <li><a href="om-optalux.html#personlig-ogonkirurgi">Personlig Ögonkirurgi</a></li>
  <li><a href="om-optalux.html#medicinsk-verksamhetschef">Medicinsk Verksamhetschef</a></li>
  <li><a href="om-optalux.html#lediga-tjanster">Lediga Tjänster</a></li>
</ul>

Bootstrap Dropdown 插件看到 data-toggle='dropdown' 标记并尝试将这些项目转换为下拉菜单。每当您单击链接时，它都会拦截（并阻止默认行为）。

【讨论】：

这绝对是我应该抓住的，但不幸的是它并没有解决问题。不过感谢您指出！编辑：我编辑了我的原始帖子以反映这不是导致问题的原因。
好吧，我让它工作了，你是对的 - 是班级和数据切换把事情搞砸了。我不仅必须从 li-tag 中删除这些，而且还必须从上面的 a-tag 中删除它们，这很奇怪，因为这就是 bootstrap 自己页面上的 navbar-example 的编写方式。无论如何，感谢您的帮助！