无法出现汉堡包下拉菜单的问题
Posted
技术标签:
【中文标题】无法出现汉堡包下拉菜单的问题【英文标题】：Having issues with hamburger dropdown failing to appear 【发布时间】：2018-04-20 10:44:30 【问题描述】：我目前正在构建一个移动可折叠导航栏，当屏幕缩小时，导航栏上的项目会消失，然后出现一个汉堡按钮，其中包含以前隐藏项目的选择下拉菜单。我一直在关注这个先前提出的问题，How to add hamburger menu in bootstrap，但我看不出哪里出错了，因为一旦文本被隐藏并且汉堡按钮出现我没有下拉菜单可供选择
<html>
<head>
<title> Bubble</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<link rel="stylesheet" href="/blog/main/main.css">
<body>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#hamburger" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand"><i class="large line chart icon"></i>Dr. Denver Housing Bubble</a>
</div>
<div class="collapse navbar-collapse" id="hamburger">
<ul class="nav navbar-nav">
<li><a hef="#">About</a></li>
<li><a hef="#">Blogs</a></li>
<li><a hef="#">Donate</a></li>
<li><a hef="#">Contact</a></li>
<li><a href="/login">Login</a></li>
<li><a href="/register">Sign Up</a></li>
<li><a href="#"> Signed In As Ralph</a></li>
<li><a href="/logout">Logout</a></li>
</ul>
</div>
</div>
</nav>
【问题讨论】：
您是否包含了 jQuery 和引导框架的脚本源？ 脚本有问题 【参考方案1】：我将以下代码行添加到我的应用程序中以启用下拉菜单。
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
【讨论】：
以上是关于无法出现汉堡包下拉菜单的问题的主要内容，如果未能解决你的问题，请参考以下文章
使用 Javascript 切换的导航栏汉堡的响应式下拉菜单适用于 Chrome、Firefox，但不适用于 Safari