我一直在尝试让 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 文件,导航栏在默认模式(未折叠)下工作正常,但如果没有它,响应模式将毫无用处。 我将不胜感激任何帮助,因为这让我抓狂。
最佳答案
从下拉菜单项中删除 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'
标记并尝试将这些元素转换为下拉列表。每当您单击链接时,它都会拦截(并阻止默认行为)。
关于jquery - 当包含 bootstrap.js 时,Bootstrap 3.x 导航栏链接无处可去,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19847118/