javascript - 在移动设备上隐藏 Bootstrap 导航栏并显示一个按钮而不是显示折叠的导航栏下拉菜单

Question

我使用 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)但也可以使用它。

Answer 1

您可以删除#toggle-button 部分。并尝试:

<div class="navbar-show">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <img height="50px" width="50px" src="img/logo3.gif">
    </button> 
</div>

Bootstrap 在这里通过数据属性链接它的 JS 部分。