jquery - 当包含 bootstrap.js 时,Bootstrap 3.x 导航栏链接无处可去

标签 jquery css twitter-bootstrap navbar

我一直在尝试让 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 文件,导航栏在默认模式(未折叠)下工作正常,但如果没有它,响应模式将毫无用处。 我将不胜感激任何帮助,因为这让我抓狂。

最佳答案

从下拉菜单项中删除 classdata-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' 标记并尝试将这些元素转换为下拉列表。每当您单击链接时,它都会拦截(并阻止默认行为)。

关于jquery - 当包含 bootstrap.js 时,Bootstrap 3.x 导航栏链接无处可去,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19847118/

相关文章:

javascript - 如何在加载后在中心或特定高度启动页面

javascript - 从 jquery 动态更改所选元素值的属性

jquery - 通过背景定位元素 - CSS-JQuery

html - 如何忽略 wordpress 主题中的 <p> CSS 规则?

css - 全高 Bootstrap 列仅包含固定元素

javascript - DRY JS - 如何将相同的 JavaScript 函数合并为一个?

javascript - 使用 Joomla 及其 Mootools 的 Twitter Bootstrap Carousel

javascript - 如何将两个文本框合并成一行

html - CHROME html 单选框显示减号

javascript - Bootstrap JS 不与中间人一起工作