我已经制作了一个带有bootstrap 3的导航栏工作正常,但是当我开始测试网站时,我意识到折叠时此导航栏菜单的链接没有聚焦正常点击时应该显示的内容。 网站上链接的每个内容都遵循以下框架:
<section >
<h1 id="ONE">ONE</h1><hr>
<div class="row">
<div class=" col-lg-12 text-align">
Whatever content
<hr>
<p class="text-left"> buttonContact
<a href="contact.html">Contact</a></p>
</div>
</div></section>
可以看出,id =&#34; ONE&#34;在h1上负责在通过导航栏项目链接时接收焦点,并且由导航栏中的每个项目链接的内容部分正在链接此&#34;部分&#34;里面有一些随机内容,没有奇怪的大小或内容的常规结构,只有带文字段的小div或者500x400的图片,正常的东西,它应该不被视为原因。
当屏幕尺寸为MD或LG,点击导航栏中的链接时,h1似乎很好地占据了互联网浏览器的起点,因为它很好。但是当导航栏因崩溃而吱吱作响时(我的webbrowser水平较小以假装移动平板电脑),并且点击了一个项目,此部分的内容出现在中间,被屏幕切割,所有这些内容都无法正常工作。我也用智能手机对它进行了测试,并且也是这样:错误的。
导航栏项目如下:
<div class="navbar-collapse collapse" >
<ul class="nav navbar-nav">
<li><a href="#ONE">one</a></li>
<li><a href="#TWO">two</a></li>
</ul></div>
非常感谢,对不起,如果这是一个非常新手的问题:S但是我已经搜索过大而且这种结构使用了我所做的,而且没有直接的信息&#34; bootstrap 3 navbar xs链接href错误& #34;,所以我在这里。再次感谢。
编辑:我发现了原因,这是因为这个JS部分,打算在点击时关闭导航栏菜单!!
$(document).on('click','.navbar-collapse.in',function(e) {
$(this).collapse('hide');
});
由于这个错误的聚焦问题,我猜这段代码不完全正确,那应该怎么办呢?谢谢!