[英]Bootstrap 3 navbar collapses when selected on mobile devices but reloads whole page
我有一个导航栏,该桌面栏在台式机上运行良好,但是在移动设备上(或者如果减小浏览器宽度),在选择一个项目后,导航栏仍保留在原处,但是我希望它折叠起来以便可以看到页面内容。 我设法通过在下面的代码中添加突出显示的更改来解决此问题,但是此解决方案的问题是,当我需要的是标题保留在原处且未重新加载时,它会使整个页面重新加载。 这是我的代码:
<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>
我的更改基本上可以在三个有链接的地方找到,我基本上补充说:
data-toggle="collapse" data-target=".navbar-collapse"
每个锚标签。 在添加这些导航栏之前,导航栏根本没有折叠,但是现在整个页面都重新加载。
我需要的是:
任何帮助将非常感激!
编辑:您可以在此处查看其当前状态的网站: http : //lovelyjubbly.azurewebsites.net
在页面上其他位置单击/轻按后,是否要关闭导航栏? 如果是这样,则必须向文档添加一些事件侦听器,然后手动关闭导航栏。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.