隱藏在移動引導導航欄，並顯示一個按鈕，而不是要顯示摺疊導航欄下拉

Question

我用引導導航欄，如果我點擊導航欄撥動它縮短了罰款在小屏幕上，顯示了導航欄，切換和下拉菜單。標準行爲。

我想，但是，隱藏在小屏幕上導航欄整個色帶和只顯示在屏幕的頂部中間部分的按鈕。當我點擊這個按鈕時，它應該打開下拉導航欄。這是我的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%; 
} 

它顯示在大屏幕上的常規導航欄，隱藏的導航欄，並顯示在小屏幕上的按鈕，但我不能讓它顯示倒塌當我點擊按鈕時navbar下拉菜單。請指導我正確的方向。一個完全不同的方法也很好，只需要具備所需的功能。 JQuery不是首選，（我正在使用angularJS），但也可以使用它。

Answer 1

您可以刪除＃切換鍵部分。並嘗試：

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

引導鏈接它的JS部分通過數據屬性在這裏。