使slideUp和slideDown在引导导航栏上工作

Question

我希望jQuery的slideUp和slideDown方法在bootstrap的导航栏上可以正常工作。 但正如我测试它，当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>

Answer 1

发生这种情况是因为nav元素具有CSS属性“ min-height：50px;”。 从navbar类以及方法slideUp和slideDown可以增加和减少height属性，因此当height低于min-height时，它将被忽略。

您可以按以下方式覆盖最小高度或更改按钮功能：

 $('.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);
    });
});

Answer 2

.navbar类的min-height为50px 。 您应该将其删除。

.navbar{
  min-height:0;
}

的jsfiddle

使slideUp和slideDown在引导导航栏上工作

问题描述

2 个解决方案

解决方案1
2 2016-04-03 06:51:54

解决方案2
1 已采纳 2016-04-03 06:39:14

使slideUp和slideDown在引导导航栏上工作

问题描述

2 个解决方案

解决方案1 2 2016-04-03 06:51:54

解决方案2 1 已采纳 2016-04-03 06:39:14

解决方案1
2 2016-04-03 06:51:54

解决方案2
1 已采纳 2016-04-03 06:39:14