本項目介紹了一個搜索欄項目，默認隱藏，僅顯示搜索圖標按鈕，點擊圖標可以顯示搜索欄，再次點擊又會重新隱藏。
hidden-search.png
Html 部分定義了搜索欄。
<!DOCTYPE html>
<head>
<!-- 字符編碼 -->
<meta charset="UTF-8" />
<!-- 虛擬窗口設(shè)置，寬度為設(shè)備寬度，縮放比例為1.0 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入外部CSS(主要是引入字體圖標)，并添加完整屬性和跨域設(shè)置 -->
<link rel="stylesheet"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous" />
<!-- 引入本地CSS -->
<link rel="stylesheet" href="style.css" />
<!-- 標題 -->
<title>Hidden Search</title>
</head>
<body>
<!-- 實際顯示區(qū)域 -->
<div class="search">
<!-- 左側(cè)文本，默認隱藏-->
<input type="text" class="input" placeholder="Search...">
<!-- 右側(cè)按鈕 -->
<button class="btn">
<i class="fas fa-search"></i>
</button>
</div>
<!-- 引入本地js-->
<script src="script.js"></script>
</body>
js部分為搜索圖標所在的按鈕添加了一個點擊監(jiān)聽事件，用來為搜索欄元素添加或者去除active類名。
const search = document.querySelector('.search')
const btn = document.querySelector('.btn')
const input = document.querySelector('.input')
// 按鈕監(jiān)聽點擊事件
btn.addEventListener('click', () => {
// 切換類名active
search.classList.toggle('active')
// 使輸入框聚焦
input.focus()
})
CSS 部分采用彈性布局，主要是為搜索欄添加了一個過渡效果，可以改變寬度。
* {
box-sizing: border-box; /* 采用 border-box 方式計算元素寬高*/
}
body {
/* 背景圖案為漸變顏色 */
background-image: linear-gradient(90deg, #7d5fff, #7158e2);
font-family: sans-serif; /* 字體 */
display: flex; /* 布局方式采用彈性布局 */
align-items: center; /* 元素在容器垂直方向居中對齊，用于display: flex中 */
justify-content: center; /* 元素在容器水平方向居中對齊，用于display: flex中 */
height: 100vh; /* 高度為視口高度 100% */
overflow: hidden; /* 元素溢出部分隱藏 */
margin: 0; /* 元素外邊距為0 */
}
.search {
position: relative; /* 使用相對位置 */
height: 50px; /* 元素高度為50px */
}
.search .input {
background-color: #fff; /* 設(shè)置背景顏色為白色 */
border: 0; /* 邊框?qū)挾葹?0 */
font-size: 18px; /* 字體大小為 18px */
padding: 15px; /* 內(nèi)邊距為 15px */
height: 50px; /* 高度為 50px */
width: 50px; /* 寬度為 50px */
transition: width 0.3s ease; /* 過渡效果用于寬度，持續(xù)0.3s，使用ease（先快后慢） */
}
.btn {
background-color: #fff; /* 設(shè)置背景顏色為白色 */
border: 0; /* 邊框?qū)挾葹?0 */
cursor: pointer; /* 設(shè)置光標樣式為一只手 */
font-size: 24px; /* 字體大小為 24px */
position: absolute; /* 使用絕對位置 */
top: 0; /* 頂部偏移為0 */
left: 0; /* 左側(cè)偏移為0 */
height: 50px; /* 高度為50px */
width: 50px; /* 寬度為50px */
transition: transform 0.3s ease; /* 過渡效果為 0.3s的轉(zhuǎn)換，使用ease（先快后慢）*/
}
.btn:focus,
.input:focus {
outline: none; /* 沒有外邊框 */
}
.search.active .input {
width: 200px; /* 寬度為200px */
}
.search.active .btn{
transform: translateX(198px); /* 橫軸移動 198px */
}
最終效果如下所示：
hidden-search.gif
