我使用bootstrap导航栏，它在小屏幕上折叠得很好，如果我点击导航栏切换，它会显示导航栏切换和下拉菜单 . 标准行为 .
但是，我希望将整个导航条功能区隐藏在小屏幕上，并在屏幕顶部中间部分显示一个按钮 . 当我点击此按钮时，它应该打开下拉导航栏 . 这是我的HTML：
<div class="navbar-show">
<button type="button" class="navbar-toggle" onclick="document.getElementById('toggle-button').click();">
<img height="50px" width="50px" src="img/logo3.gif">
</button> </div>
<nav class="navbar navbar-default" data-ng-controller="GlobalAuthCtrl"> <div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" id="toggle-button" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://gliderforecast.com"><img height="50px" width="48px" src="img/logo3.gif"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
我的css：
@media (max-width: 767px) {
.navbar{
display:none;
}
.navbar-show {
display: block !important;
}
}
.navbar-show {
display: none;
position: fixed;
z-index: 10;
top: 0px;
left: 50%;
}
它在大屏幕上显示常规导航栏，隐藏导航栏并在小屏幕上显示按钮，但是当我点击按钮时，我无法显示折叠的导航栏下拉列表 . 请指导我正确的方向 . 完全不同的方法也很好，只需具备所需的功能 . JQuery不是首选，（我使用的是angularJS），但也可以使用它 .
1 回答
您可以删除＃切换按钮部分 . 并尝试：
Bootstrap在这里通过数据属性链接它的JS部分 .