gpt4 book ai didi

javascript - 使 slideUp 和 slideDown 在 Bootstrap 导航栏上工作

转载 作者:太空宇宙 更新时间:2023-11-03 23:01:12 24 4
gpt4 key购买 nike

我希望 jQuery 的 slideUpslideDown 方法在 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>

最佳答案

这是因为 nav 元素具有 CSS 属性“min-height: 50px;”来自类导航栏,方法 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);
});
});

关于javascript - 使 slideUp 和 slideDown 在 Bootstrap 导航栏上工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36382252/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com