使slideUp和slideDown在引导导航栏上工作
使slideUp和slideDown在引导导航栏上工作
提问于 2016-04-03 06:22:22
我希望jQuery的slideUp和slideDown方法能够在引导导航栏上顺利工作。但是当我测试它时，当slideUp方法被应用时，导航条只向上滑动了一小部分，然后立即消失了，同样的方法被应用到slideDown，只是相反的方向。为什么会发生这种情况，以及如何使动画顺利运行？
代码片段如下所示。
$('.slideUpBtn').click(function() {
$('nav').slideUp("slow");
});
$('.slideDownBtn').click(function() {
$('nav').slideDown("slow");
});.slideUpBtn {
position: fixed;
left: 0;
bottom: 0;
}
.slideDownBtn {
position: fixed;
right: 0;
bottom: 0;
}<html>
<head>
<title>temp</title>
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header"><a href="#" class="navbar-brand">Brand</a>
</div>
</div>
</nav>
<button type="button" onclick="slideUp_event()" class="slideUpBtn">slideUp</button>
<button type="button" onclick="slideDown_event()" class="slideDownBtn">slideDown</button>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-04-03 06:39:14
Stack Overflow用户
发布于 2016-04-03 06:51:54
这是因为nav元素具有CSS属性" min-height : 50 be；“，并且方法slideUp和slideDown增加和降低了高度属性，因此当高度低于最小高度时，它将被忽略。
您可以覆盖最小高度或更改按钮，如下所示：
$('.slideUpBtn').click(function() {
var minHeight = $('nav').css('min-height');
$('nav').css('min-height',0);
$('nav').slideUp("slow", function(){
$('nav').css('min-height', minHeight);
});
});
$('.slideDownBtn').click(function() {
var minHeight = $('nav').css('min-height');
$('nav').css('min-height',0);
$('nav').slideDown("slow", function(){
$('nav').css('min-height', minHeight);
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36382252
复制相关文章
相似问题
腾讯云开发者
