我有一个简单的标题，我在其中放置了一个搜索栏。搜索栏占据了整个宽度。我想用jquery添加一个滑动切换效果，以便它上下滚动：
.HTML：
<body>
<header>
<div class="search-bar">
<form action="/action_page.php">
<input type="search" name="q" placeholder="Search">
</form>
</div>
<div id="top-nav" class="container-fluid">
<div class="top-nav-wrapper">
<a class="top-req-info" href="#" >Request Info</a>
<ul class="top-nav-right">
<li class="hidden search-icon"><img src="images/search.png"></li>
</ul>
</div>
</div>
</header>
</body>
.CSS：
.search-bar input {
background-color: #821A31;
color: #ffff;
font-size: 35px;
border: 0;
margin: 0;
height: 76px;
width: 100%;
padding: 0 80px;
font-weight: 200;
display: none;
}
.search-bar input:focus, .search-bar input:focus{
outline: none;
}
.search-bar input.slide-down {
display: block;
}
.search-bar input::placeholder {
color: white;
}
.hover-bar {
background: #821A31!important;
}
j查询：
$('.search-icon').click(function() {
$('.search-bar input').toggleClass('slide-down');
$('#top-nav-book, .top-req-info').toggleClass('hover-bar');
});
问题是，如果我使用 slideToggle 而不是 toggleClass，它将不起作用，因为它会给我一个错误，如果我在例如高度或可见性之间使用过渡，什么都不会发生。我只需要在显示无和显示块之间创建一个令人愉快的动画，以创建下拉滑动效果。有什么建议吗？
>slideToggle()是一个jQuery方法，负责整个动画。此处提供完整的选项列表。
$('#top-nav').on('click','.search-icon',function() {
$('input','.search-bar').slideToggle();
});
查看它的工作原理：
$('#top-nav').on('click','.search-icon',function() {
$('input','.search-bar').slideToggle();
});.search-bar input {
background-color: #821A31;
color: #ffff;
font-size: 35px;
border: 0;
margin: 0;
height: 76px;
width: 100%;
padding: 0 80px;
font-weight: 200;
display: none;
}
.search-bar input:focus,
.search-bar input:focus {
outline: none;
}
.search-bar input::placeholder {
color: white;
}
.hover-bar {
background: #821A31;
}
.top-nav-right {
list-style-type: none;
}<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="search-bar">
<form action="/action_page.php">
<input type="search" name="q" placeholder="Search">
</form>
</div>
<div id="top-nav" class="container-fluid">
<div class="top-nav-wrapper">
<ul class="top-nav-right">
<li class="hidden search-icon"><i class="fa fa-search"></i></li>
</ul>
</div>
</div>
</header>