1
我讓搜索按鈕在導航欄上輕鬆顯示和隱藏搜索欄,並輕鬆進出,但動畫不起作用,它不會給我控制檯中出現錯誤。我不會寫出整個html代碼,這是html的示例代碼。緩解和緩解動畫對搜索欄不起作用
$('.search-icon a').on("click", function(){
$('body').addClass('show-search').children('.search-box-outer').slideDown();
return false;
});
$('.close-search').click(function(){
$('.search-box-outer').removeClass('show-search').slideUp();
return false;
});
.search-box-outer {
position: fixed;
width: 100%;
height: 60px;
float: left;
background: #fff;
z-index: 99999999;
left: 0;
top: -60px;
transition: all 0.2s ease-in;
}
.search-box {
width: 100%;
position: relative;
padding-right: 60px;
}
.search-box .form-control,
.search-box .form-control:focus {
height: 82px;
border: 0;
border-bottom: 1px solid #ccc;
box-shadow: none !important;
font-size: 24px;
border-radius: 0;
}
.close-search {
background-color: #fff;
color: #000;
width: 60px;
height: 82px;
float: left;
border-bottom: 1px solid #ccc;
position: absolute;
top: 0;
right: 0;
font-size: 24px;
line-height: 82px;
text-align: center;
transition: all 0.2s ease-out;
}
.show-search .search-box-outer {
top: 0;
position: relative;
z-index: 99999;
width: 100%;
}
.search-box-outer .container {
padding: 40;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<header>
<nav>
<ul>
<li>
<a href="home">home</a>
</li>
<li>
<a href="aboutus">aboutus</a>
</li>
<li>
<a href="contactus">contactus</a>
</li>
<li class="search-icon">
<a href="#!">
<i class="fa fa-search"></i>
</a>
</li>
</ul>
</nav>
</header>
<div class="search-box-outer">
<div class="search-box">
<form>
<input type="text" value="" class="form-control" placeholder="Type & Hit Enter to Search" />
</form>
<a href="#!" class="close-search">
<i class="fa fa-close"></i></a>
</div>
</div>
有什麼問題?除了css問題(*您的輸入不完全隱藏在頂部,並且您的關閉按鈕超出了窗口邊界*),它似乎正在工作。當我點擊搜索時輸入下降,當我點擊關閉時上升。 – Ozan
@Ozan緩解進出不工作任何想法? –
你可以用這個$('。search-icon a')來使用toogleClass。click(function(){('body')。toggleClass('show-search'); });.但你仍然需要修復css – blecaf