我有一個header包含搜索圖示的部分。單擊此圖示時，我希望我的搜索欄從頂部滑入。當它關閉時，我希望它向上滑動。
目前：
- 我的搜索欄在初始點擊時會向下滑動，但是當點擊“再次點擊我”時，它不會向上滑動。
- 在第三次單擊該圖示兩次后，當您嘗試滑入選單（在第一次單擊時有效）時，它不會滑入，只會出現
演示：
$(function() {
function slideDown(){
var element = $(".header__searchBar");
var tl = new TimelineLite();
tl.to(element, 1, {
top: 0,
autoAlpha: 1
});
/* tl.from(element, 1, {
top: "-100%",
autoAlpha: 1
}); */
}
$(".header__searchIcon").click(function() {
$(".header__searchBar").toggleClass("active");
slideDown();
});
});.header {
position: relative;
padding: 20px 0;
}
.header__searchIcon {
position: relative;
z-index: 99;
cursor: pointer;
}
.header__searchBar {
position: absolute;
left: 0;
top: -100%;
width: 100%;
height: 100%;
color: white;
}
.header__searchBar.active {
z-index: 10;
background-color: #5F249F;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="header">
<div class="container">
<div class="row">
<div class="col-2">
LOGO
</div>
<div class="col-8">
MENU
</div>
<div class="col-2">
<div class="header__searchIcon">
Click me
</div>
</div>
</div>
</div>
<div class="header__searchBar">
SEARCH FORM HERE
</div>
</div>uj5u.com熱心網友回復：
我只是玩了一下，讓它作業了：
https://codepen.io/ryanowalls/pen/bGozVpy
我認為它看起來沒有向后滑動的主要原因是因為紫色背景顏色僅在您的“活動”類上設定。這意味著搜索欄在看到影片消失之前會變成白色。
CSS 更新：
.header__searchBar {
position: absolute;
top: 0;
left: 0;
transform: translateY(-100%);
width: 100%;
height: 100%;
color: white;
background-color: #5F249F;
}
JavaScript 更新：
$(function() {
function toggleSearch(){
var element = $(".header__searchBar");
// check if search bar is open already
var active = element.hasClass("active");
if(active) {
// close search bar
gsap.to(element, {'transform': 'translateY(-100%)'});
} else {
// open search bar
gsap.to(element, {'transform': 'translateY(0%)'});
}
$(".header__searchBar").toggleClass("active");
}
$(".header__searchIcon").click(function() {
toggleSearch();
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/411152.html
標籤：
下一篇：CSS：無論如何都無法編輯鏈接