防止 bootstrap 在 md 断点上方折叠动画
preventing bootstrap collapse animation above md breakpoint
我使用 Bootstrap 创建了一个网站。我的站点有一个导航栏,当网页宽度小于 md 断点时,菜单选项 'About'、'My Projects' 和 'Contact Me' 隐藏在可扩展菜单后面。我已将 data-toggle="collapse" 添加到菜单选项,这样当用户单击任何菜单选项时,菜单就会折叠。
我遇到的问题是,即使页面宽度超过 md 断点,上述菜单选项也会经历折叠动画。
我认为可以操纵此行为的一种方法是 adding/removing data-toggle="collapse" 属性,该属性基于页面的当前大小,通过使用 $(window .resize() 和 $(window).load() 页面初始加载的事件侦听器。
还有更好的解决方案吗?
Link 到网站:http://benws-projectportfolio.herokuapp.com/
HTML:
<nav class="navbar navbar-inverse fixed-top navbar-toggleable-md navbar-light bg-faded" style="background-color:#3A4A4D;">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Ben Shippey</a>
<div class="collapse navbar-collapse mr-auto" id="navbarSupportedContent" style="background-color:#3A4A4D;">
<ul class="navbar-nav ">
<li class="nav-item">
<a id="aboutButton" class="nav-link active" href="#navbarSupportedContent" data-toggle="collapse">About</a>
</li>
<li class="nav-item">
<a id="projectButton" class="nav-link" href="#navbarSupportedContent" data-toggle="collapse">My Projects</a>
</li>
<li class="nav-item">
<a id="contactButton" class="nav-link" href="#navbarSupportedContent" data-toggle="collapse">Contact Me</a>
</li>
</ul>
</div>
</nav>
我已经成功测试了@ZimSystem 的这个答案:
将数据目标属性添加到您的导航链接。不过,在您的情况下,它将是:
data-target=".navbar-collapse.show"
而不是
data-target=".navbar-collapse.in"
如@ZimSystem 的回答
我使用 Bootstrap 创建了一个网站。我的站点有一个导航栏,当网页宽度小于 md 断点时,菜单选项 'About'、'My Projects' 和 'Contact Me' 隐藏在可扩展菜单后面。我已将 data-toggle="collapse" 添加到菜单选项,这样当用户单击任何菜单选项时,菜单就会折叠。
我遇到的问题是,即使页面宽度超过 md 断点,上述菜单选项也会经历折叠动画。
我认为可以操纵此行为的一种方法是 adding/removing data-toggle="collapse" 属性,该属性基于页面的当前大小,通过使用 $(window .resize() 和 $(window).load() 页面初始加载的事件侦听器。
还有更好的解决方案吗?
Link 到网站:http://benws-projectportfolio.herokuapp.com/
HTML:
<nav class="navbar navbar-inverse fixed-top navbar-toggleable-md navbar-light bg-faded" style="background-color:#3A4A4D;">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Ben Shippey</a>
<div class="collapse navbar-collapse mr-auto" id="navbarSupportedContent" style="background-color:#3A4A4D;">
<ul class="navbar-nav ">
<li class="nav-item">
<a id="aboutButton" class="nav-link active" href="#navbarSupportedContent" data-toggle="collapse">About</a>
</li>
<li class="nav-item">
<a id="projectButton" class="nav-link" href="#navbarSupportedContent" data-toggle="collapse">My Projects</a>
</li>
<li class="nav-item">
<a id="contactButton" class="nav-link" href="#navbarSupportedContent" data-toggle="collapse">Contact Me</a>
</li>
</ul>
</div>
</nav>
我已经成功测试了@ZimSystem 的这个答案:
将数据目标属性添加到您的导航链接。不过,在您的情况下,它将是:
data-target=".navbar-collapse.show"
而不是
data-target=".navbar-collapse.in"
如@ZimSystem 的回答