用户点击Twitter Bootstrap的链接后，如何自动折叠移动视图顶部的导航栏? [英] How to automatically collapse the top navbar on mobile view after user tap a link with Twitter Bootstrap?

问题描述

我有一个带有Twitter引导框架的一页滚动"网站.

I have a "one page scroll" website with Twitter bootstrap framework.

在桌面视图上，我的顶部导航栏始终可见，并且顶部导航栏的不同链接将用户锚定到页面的不同部分.

On desktop view, my top navbar is always visible and the different links of the top navbar anchor the user to the different sections of the page.

在移动视图上，默认情况下，顶部导航栏处于折叠状态.用户必须点击顶部导航栏的汉堡菜单以将其展开，然后点击链接以自动滚动到该区域. 问题在于，在移动视图中，点击链接后，顶部导航栏不会折叠并保持打开状态，用户必须手动将其关闭.

On mobile view, the top navbar is collapsed by default. The user has to tap on the burger menu of the top navbar to expand it, and then tap on a link to automatically scroll to the section. The problem is that on mobile view, after taping a link, the top navbar doesn't collapse and stay open, user has to close it manually.

用户仅点击移动视图链接后，应该使用哪种CSS或JS自动关闭导航栏?

What CSS or JS should I use to automatically close the navbar after the user tap on a link for mobile view only?

推荐答案

尝试一下(我假设引导程序3

Try this (I'm assuming bootstrap 3

$('.nav a').on('click', function(){
  $(".navbar-toggle").click() //bootstrap 3.x
});

这篇关于用户点击Twitter Bootstrap的链接后，如何自动折叠移动视图顶部的导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！