Javascript 隐藏移动设备上的引导导航栏，并显示按钮，以显示收拢的导航栏下拉列表

我使用引导导航栏，它可以在小屏幕上很好地折叠，如果我单击导航栏切换，它会显示导航栏切换和下拉菜单。标准行为

但是，我想在小屏幕上隐藏整个导航栏功能区，只在屏幕的中上部显示一个按钮。当我点击这个按钮时，它会打开下拉导航栏。这是我的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">

它在大屏幕上显示常规导航栏，隐藏导航栏并在小屏幕上显示按钮，但我无法在单击按钮时显示折叠的导航栏下拉列表。请给我指引正确的方向。完全不同的方法也可以，只需具备所需的功能即可。JQuery不是首选（我使用的是angularJS），但也可以使用它。

您可以删除#切换按钮部分。并尝试：

<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部分

您可以在JSFIDLE中共享链接吗？您正在使用bootstrap Js和一个jquery库谢谢！实际上，按钮的数据切换和数据目标属性使引导JS启动并隐藏/显示导航栏。轻松愉快：）

<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>