使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