Twitter Bootstrap 移动导航:单击菜单链接后隐藏菜单 [英] Twitter Bootstrap mobile nav: hide menu after clicking menu link

问题描述

我正在寻找一种方法，让 Twitter Bootstrap 移动/平板电脑导航在单击菜单链接后自动隐藏/折叠.我有很多菜单项，所以当用户在 iPhone 中展开菜单时，他们只能看到菜单而不是下面的页面.当用户单击菜单链接时，这会使用户感到困惑，使单击后似乎什么也没发生.

I'm looking for a way to make the Twitter Bootstrap mobile/tablet nav automatically hide/collapse after clicking a menu link. I have a lot of menu items and so when users expand the menu in iPhone, they only see the menu and not the page underneath. This confuses the user when they click a menu link, making it seem like nothing has happened after click.

非常感谢你，并拥抱任何能指出我正确方向的人！

A huge thank you and hug to anyone who can point me in the right direction with this!

推荐答案

如果您使用的是 BS3.x，您可以使用这样的标记折叠移动导航 - 注意data-toggle"和data-target"中的主页链接的标记:

If you are using BS3.x you can collapse the mobile nav with markup like this - notice the "data-toggle" and "data-target" in the markup for the home link:

  <nav class="collapse navbar-collapse" role="navigation">
    <ul class="nav navbar-nav">
      <li class="active">
        <a data-toggle="collapse" data-target=".navbar-collapse" href="#home">Home</a>
      </li>
      <li>

您还可以通过这样的脚本折叠移动导航:

You can also collapse the mobile Nav via script like this:

    <script>
      $('.navbar-collapse a').click(function (e) {
        $('.navbar-collapse').collapse('toggle');
      });
    </script>

这种方法绝对不需要额外的标记.每次在导航中单击链接时，它都会切换导航栏.

This approach requires absolutely no extra markup. Each time a link is clicked in the nav it will toggle the navbar.

干杯.

这篇关于Twitter Bootstrap 移动导航:单击菜单链接后隐藏菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！