我可能错过了一些非常小的东西,这令我感到沮丧,因为我现在坐在这里几个小时试图解决这个问题. Navbar不会与
Javascript链接.正确调整窗口大小时会出现按钮,但单击时不会折叠菜单.
<link rel="stylesheet" href="/assets/css/bootstrap.css"> <link rel="stylesheet" href="/assets/css/bootstrap-responsive.css"> <link rel="stylesheet" href="/assets/css/style.css?v=2"> <script src="/assets/js/bootstrap.js"></script> <script src="/assets/js/bootstrap.min.js"></script> <!-BootStrap--><script src="/assets/js/jquery-1.7.1.min.js"></script> <script src="/assets/js/jquery.validate.min.js"></script> <script src="/assets/js/script.js"></script> <script src="/assets/js/bootstrap-fileupload.js"></script>
快速查看我的HTML –
<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <!--<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">--> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="span4"> <a href="{site_url}" title="People Team"> <img src="/assets/img/logo.png" alt="People Team logo" /> </a> </div> <nav> <div class="nav-collapse"> <ul class="nav"> <li{if segment_1 == ""} class="active"{/if}> <a href="/" title="Home">Home</a> </li> <li{if segment_1 == "services"} {/if}> <a href="/services" title="Contact People Team">Services</a> </li> <li{if segment_1 == "about"} {/if}> <a href="/about" title="About People Team">About the team</a> </li> <li{if segment_1 == "contact"} {/if}> <a href="/contact" title="Contact People Team">Contact Us</a> </li> </ul> </div>
我假设Javascript位于Bootstrap.min.js或Bootstrap.js文件中,这些文件是导航栏工作所必需的.我只是难过.任何帮助,将不胜感激.
干杯,
解决方法
更改JS加载的顺序.首先是jQuery,然后是bootstrap插件.
<script src="/assets/js/jquery-1.7.1.min.js"></script> <script src="/assets/js/bootstrap.js"></script> -- remove,as it is not really needed when including the minified version <script src="/assets/js/bootstrap.min.js"></script>