如何在按下搜索图标后扩展搜索栏

在按下搜索图标后扩展搜索栏的实现方式可以通过以下步骤来完成：

HTML结构：在页面中创建一个搜索图标和一个初始隐藏的搜索栏。可以使用HTML的<input>元素来创建搜索栏，并设置其初始样式为隐藏。

<div>
  <i class="fa fa-search" id="search-icon"></i>
  <input type="text" id="search-bar" style="display: none;">
</div>

CSS样式：使用CSS来定义搜索图标和搜索栏的样式。可以使用CSS选择器来选择搜索图标和搜索栏，并设置它们的样式。

#search-icon {
  cursor: pointer;
}

#search-bar {
  display: none;
  width: 200px;
  padding: 5px;
}

JavaScript交互：使用JavaScript来实现搜索栏的扩展和收缩功能。可以通过监听搜索图标的点击事件来切换搜索栏的显示状态。

var searchIcon = document.getElementById('search-icon');
var searchBar = document.getElementById('search-bar');

searchIcon.addEventListener('click', function() {
  if (searchBar.style.display === 'none') {
    searchBar.style.display = 'block';
    searchBar.focus();
  } else {
    searchBar.style.display = 'none';
  }
});

以上代码实现了在按下搜索图标后扩展搜索栏的功能。点击搜索图标时，搜索栏会显示出来，并且获取焦点，可以输入搜索内容。再次点击搜索图标时，搜索栏会隐藏起来。

腾讯云相关产品和产品介绍链接地址：