Javascript 当在按钮外单击时,如何在“我的菜单”中关闭动画折叠
我的导航栏是: 我的html代码:Javascript 当在按钮外单击时,如何在“我的菜单”中关闭动画折叠,javascript,jquery,html,css,twitter-bootstrap-3,Javascript,Jquery,Html,Css,Twitter Bootstrap 3,我的导航栏是: 我的html代码: <div class="wrapper"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav
<div class="wrapper">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
当在按钮外单击时,如何在我的菜单中放置动画折叠关闭。当在按钮外单击时,它关闭,但没有动画效果。如何仅在折叠打开时更改菜单按钮的颜色?此解决方案可能适用于您。将CloseNav()函数切换到以下位置:
function CloseNav() {
$(".navbar-collapse").stop().animate({'height': 0},300, function () {
$('.navbar-collapse').removeClass('in').addClass("collapse");
});
$(".navbar-toggle").stop().removeClass('collapsed');
};
看起来只需将.collapse
类添加到导航栏中,即可立即切换高度。如果制作动画,然后添加类,则会创建所需的向上滑动效果
对于动画,您可以使用我的javascript知识。我需要jQuery函数。谢天谢地,这个人将为您编写代码。您必须通过提供的资源来学习它。@user3216077
animate()
是一个jQuery函数flec-我知道,但是如果我有时间学习它,并且不想尝试,我就不会寻求帮助。谢谢。你看到我的第二个问题了吗:如何只在折叠打开时才更改菜单按钮的颜色,并在其中单击close collpase,返回到开始颜色,而不是焦点?我在你的帖子中没有看到任何CSS,但这将是我开始的地方。尝试查看:hover
功能,或者在JS打开时将一些样式添加到已经通过JS应用的某个类中。我尝试了以下操作:focus、:active,但没有结果。我认为只有javascript才能做到这一点。再次感谢你。
function CloseNav() {
$(".navbar-collapse").stop().animate({'height': 0},300, function () {
$('.navbar-collapse').removeClass('in').addClass("collapse");
});
$(".navbar-toggle").stop().removeClass('collapsed');
};