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

make slideUp and slideDown work on bootstrap navbar

本文关键字：导航 工作 引导程序 slideUp slideDown      更新时间：2023-11-15

我希望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>

之所以发生这种情况，是因为nav元素具有类导航栏中的CSS属性"min-height:50px；"，方法slideUp和slideDown增加和减少了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);
    });
});

.navbar类的min-height为50px。你应该删除它。

.navbar{
  min-height:0;
}

JSFiddle

相关文章：