50天50个前端小项目（纯html+css+js）第四天（隐藏搜索小部件）

mzldustu

已于 2022-10-19 23:49:59 修改

阅读量231

点赞数

分类专栏： 50Day50前端基础小项目(纯三件套) 文章标签：前端 javascript css html

于 2022-10-16 22:38:27 首次发布

本文链接：https://blog.csdn.net/qq_45628733/article/details/127354541

版权

本文介绍如何使用HTML、CSS和JavaScript创建一个可展开和收起的搜索小部件。点击搜索按钮，搜索框将展开；再次点击，搜索框则会隐藏。通过示例代码，展示了项目的实现过程，并提及在实现中遇到的input.focus()问题，表示将在后续博客中详细讨论。

摘要由CSDN通过智能技术生成

今天主要实现一个搜索小部件，点击那个搜索按钮会展开搜索框，再点击它会缩回去。效果展示如图：
未点击的时候
在这里插入图片描述
点击搜索按钮：

再次点击它又会缩回成一开始的搜索小按钮。
上代码：
首先是html部分：就是一个按钮和搜索框

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- cdn图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin