bootstrap 导航栏 - 仅在移动设备上显示子菜单

Question

我有一个标准的 bootstrap 导航栏，在移动设备上会折叠。下面是代码，供大家参考：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" 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="#">WebSiteName</a>
    </div>

    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu with dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Submenu voice 1</a></li>
            <li><a href="#">Submenu voice 2</a></li>
            <li><a href="#">Submenu voice 3</a></li>
          </ul>
        </li>
      </ul>
    </div>

  </div>
</nav>

我想在移动设备上点击汉堡菜单后，直接获取 3 <li> "Submenu voice x" 并隐藏父级 <li> (class="dropdown").

我怎样才能达到这个结果？谢谢

Answer 1

您可以为此使用 CSS：

@media (max-width: 767px) {
  .navbar-nav .dropdown-menu {
    display: block;
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
  }  
  .dropdown-toggle {
    display: none !important;
  }
  .navbar-inverse .navbar-nav .dropdown-menu > li > a {
    color: #9d9d9d;
  }
}

CODEPEN

Answer 2

我必须将以下内容添加到 .navbar-nav .dropdown-menu 才能使其正常工作。

opacity:1;
visibility: visible;

Answer 3

试试下面的代码。

HTML:

                <nav class="main-menu navbar-expand-md">
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div class="navbar-collapse collapse clearfix" id="navbarSupportedContent1">
                        <ul class="navigation clearfix">
                            <li class="current dropdown"><a  routerLink="/">Home</a>
                            </li>
                            <li class="dropdown"><a href="javascript:void(0)">About</a>
                                <ul class="dropdown-menu">
                                    <li><a href="/company-overview">Company Overview</a></li>
                                    <li><a href="/vision-mission">Vision Mission</a></li>
                                    <li><a href="/ethics-corevalues">Ethics & Core Values</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </nav>

CSS:

.dropdown:hover > .dropdown-menu{
    display: block;
    }

bootstrap 导航栏 - 仅在移动设备上显示子菜单

bootstrap navbar - show only submenu on mobile

navbar

twitter-bootstrap-3

CODEPEN

HTML:

CSS: