引导导航菜单.单击其任何项目时将其关闭

Question

我正在使用以下html代码：

  <nav class="navbar navbar-default">
    <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>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav list-inline">
        <li>
          <a href="#" v-on:click.prevent="showHomepage">
            <span class="btn btn-default btn-sm">Home</span>
          </a>
        </li>
        <!-- Other Items ..... -->
      </ul>
    </div>
  </nav>

如何在

小屏幕上单击li项时关闭菜单项？

Answer 1

你可以用jQuery轻松地做到这一点：

  jQuery("document").ready(function(){      
    if (jQuery(".navbar-toggle").is(":visible")) { //check if menu button visible
      jQuery(".nav-menu li").click(function() {    
        jQuery(".navbar-toggle").trigger("click") // emulate click on menu button to close menu
      })
    }
  })