在移动设备上隐藏引导导航条，并显示一个按钮来显示折叠的导航条下拉

Hide bootstrap navbar on mobile and show a button instead to show the collapsed navbar dropdown

本文关键字：导航 显示 一个 按钮 折叠 移动 隐藏      更新时间：2023-09-26

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

但是，我想在小屏幕上隐藏整个导航条功能区，只在屏幕的顶部中间部分显示一个按钮。当我点击这个按钮时，它应该打开下拉导航条。这是我的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)，但也可以使用它。

可以删除#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通过这里的data- attributes链接它的JS部分。

相关文章：