Bootstrap汉堡菜单不起作用 [英] Bootstrap hamburger menu not working
本文介绍了Bootstrap汉堡菜单不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
由于某种原因，我的自举汉堡包菜单出现了问题.当在小屏幕上显示菜单时，菜单显示得很好，但是单击时菜单不会展开.
For some reason my bootstrap hamburger menu is acting up. The menu shows up just fine when on a small screen but the menu does not expand when clicked.
我继续并添加了完整代码，以查看是否有帮助.
I went ahead and added the full code to see if that helps.
这是我的代码:
<!DOCTYPE html>
<html>
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<head>
<title> TopMusicFestivals </title>
<script src="https://code.jquery.com/jquery-git2.min.js"></script>
<link rel= "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--Connecting CSS-->
<link rel= "stylesheet" href = "/stylesheets/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" href="#collapse1" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">TMF</a>
</div>
<div id="navbar" class="collapse navbar-collapse" data-target="#collapse1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<!--The if statemnet below along with the currentUser varriable is how we're passing the user name into the navbar-->
<% if(!currentUser){ %>
<li> <a href="/login"> Login </a></li>
<li> <a href="/register"> Sign Up </a></li>
<% } else{ %>
<li> <a href ="#">Signed In As: <%= currentUser.username%> </a></li>
<li> <a href="/logout"> Log Out </a></li>
<% } %>
</ul>
</div>
</div>
</nav>
<!--==============-->
推荐答案
如果在较小的屏幕上显示hamberger菜单，但没有展开，则可能是引导JS和JQuery文件未正确加载.只需将以下脚本添加到您的代码中即可.
If the hamberger menu is showing up on smaller screens, but not expanding, it could be that the bootstrap JS and JQuery files are not loading correctly. Just add the following scripts to you code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
这篇关于Bootstrap汉堡菜单不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
