Question

我有一个几乎完美的导航菜单。

在移动设备上：当我打开汉堡菜单时，它将占据屏幕大小的3/4。我可以。当我单击导航栏中的链接之一时，将进入正确的部分，但菜单保持打开状态。

我更喜欢在单击链接之一后立即关闭菜单，而不是必须按“汉堡包”关闭菜单。

HTML：

    <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="#about">About</a>
        </li>
        <li>
          <a href="#portfolio">Portfolio</a>
        </li>
        <li>
          <a href="#education">Education</a>
        </li>
        <li>
          <a href="#experience">Experience</a>
        </li>
        <li>
          <a href="#testimonials">Testimonials</a>
        </li>
        <li>
          <a href="#testimonials">Skills</a>
        </li>

        <li>
          <a href="#contact">Contact</a>
        </li>
      </ul>
    </div>

Answer 1

您可以在所有<a>上添加点击监听器，然后关闭监听器功能栏做到这一点的最佳方法是为所有这些对象提供同一个类，并使用for循环为它们添加监听器
或者您可以使用jquery，这样就不需要循环

Answer 2

$('.nav a').on('click', function(){

$('.navbar-toggle').click(); 

});

使用此代码，当您单击导航栏项目时，它将调用navbar-toggle类的click事件。它将根据需要关闭导航栏。

单击按钮时关闭导航窗口（移动）

2 个答案: