引导导航菜单。单击它的任何项目时将其关闭答案

【问题标题】：Bootstrap nav menu. Close it on click to any of its item引导导航菜单。单击它的任何项目时将其关闭
【发布时间】：2016-02-09 00:40:10
【问题描述】：

我正在使用以下 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项时关闭菜单项？

【问题讨论】：

标签： jquery css twitter-bootstrap responsive-design

【解决方案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
      })
    }
  })

【讨论】：