Javascript 在移动设备上选择Bootstrap 3导航栏时会折叠,但会重新加载整个页面
我有一个导航栏,它在桌面上可以正常工作,但在移动设备上(或者如果我缩小浏览器宽度),在选择一个项目后,导航栏保持在原来的位置,但我希望它折叠起来,以便可以看到页面内容。我通过在下面的代码中添加突出显示的更改来解决这个问题,但是这个解决方案的问题是,当我需要的是页眉保持不变而不重新加载时,它会使整个页面重新加载。这是我的密码:Javascript 在移动设备上选择Bootstrap 3导航栏时会折叠,但会重新加载整个页面,javascript,html,css,twitter-bootstrap,angular,Javascript,Html,Css,Twitter Bootstrap,Angular,我有一个导航栏,它在桌面上可以正常工作,但在移动设备上(或者如果我缩小浏览器宽度),在选择一个项目后,导航栏保持在原来的位置,但我希望它折叠起来,以便可以看到页面内容。我通过在下面的代码中添加突出显示的更改来解决这个问题,但是这个解决方案的问题是,当我需要的是页眉保持不变而不重新加载时,它会使整个页面重新加载。这是我的密码: <div class="navbar navbar-inverse navbar-fixed-top"> <div class="containe
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarHeaderCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" [routerLink]="['/Home']" **data-toggle="collapse" data-target=".navbar-collapse"**><img src="./app/assets/images/football.png" style="height: 28px; display: inline-block; margin-right: 10px;">Gameplan NFLC</a>
</div>
<div class="navbar-collapse collapse" id="navbarHeaderCollapse">
<ul class="nav navbar-nav">
<li><a [routerLink]="['/Home']" **data-toggle="collapse" data-target=".navbar-collapse"**>Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Main<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a [routerLink]="['/SuperbowlOdds']" **data-toggle="collapse" data-target=".navbar-collapse"**>Superbowl Odds</a></li>
</ul>
</li>
<li>
<a href="http://forum.gameplan.org.uk/viewforum.php?f=9&sid=c44a50e759b28dd287ad52a0f7609940">Forum</a>
</li>
</ul>
</div>
</div>
</div>
到每个锚定标签。在添加这些之前,导航栏根本没有崩溃,但现在整个页面都重新加载了
我需要的是:
编辑:您可以在此处看到处于当前状态的站点:在页面的其他位置单击/点击后是否关闭导航栏?如果是这样,您必须向文档中添加一些事件侦听器并手动关闭导航栏。在页面上的其他位置单击/点击后是否要关闭导航栏?如果是这样,您必须向文档中添加一些事件侦听器,并手动关闭导航栏。您是否查看了控制台中悬停的内容?也许你的标志链接或其他链接都在按钮上方?有时会发生。请看上面的编辑,我已经包含了网站的url,也许这将有助于找到问题。这就像我看到的一样正常工作。您是否查看控制台中您悬停的内容?也许你的标志链接或其他链接都在按钮上方?有时会发生。请参见上面的编辑,我已经包含了网站url,可能这将有助于找到问题。这将正常工作,就像我看到的单击3个锚链接之一,我想关闭id为navbarHeaderCollapse的div,同时保持类navbar头的div打开。您的链接不是锚。您的链接是指向网站另一页的链接。您必须处理click event,preventPropagation(),并删除必要的类。Profesor08,您有这样的示例吗?单击3个锚链接中的一个,我想关闭id为navbarHeaderCollapse的div,同时保持类navbar标头打开的div您的链接不是锚。您的链接是指向网站另一页的链接。您必须处理click事件、preventPropagation()并删除必要的类。Professor08,您有这样的示例吗?
data-toggle="collapse" data-target=".navbar-collapse"