实现点击搜索图标显示div表单，点击外部或滚动时隐藏的方案

HTML 结构 #

先搭建基础DOM结构，包含搜索触发图标和搜索表单容器：

<!-- 搜索触发图标 -->
<span class="search-icon">🔍</span>

<!-- 默认隐藏的搜索表单 -->
<div class="search-form">
  <input type="text" placeholder="输入关键词搜索..." />
  <button type="submit">搜索</button>
</div>

CSS 样式 #

设置表单默认隐藏状态，添加显示样式并美化布局：

/* 搜索图标样式 */
.search-icon {
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  user-select: none;
}

/* 搜索表单默认隐藏 */
.search-form {
  display: none;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 4px;
  width: 300px;
}

/* 表单显示状态 */
.search-form.active {
  display: flex;
  gap: 8px;
}

.search-form input {
  flex: 1;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-form button {
  padding: 6px 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

JavaScript 逻辑 #

处理三个核心交互场景：点击图标切换显示、点击外部区域隐藏、滚动页面隐藏：

const searchIcon = document.querySelector('.search-icon');
const searchForm = document.querySelector('.search-form');

// 点击图标切换表单显示/隐藏
searchIcon.addEventListener('click', (e) => {
  e.stopPropagation(); // 阻止事件冒泡，避免触发外部点击的隐藏逻辑
  searchForm.classList.toggle('active');
  // 显示时自动聚焦输入框
  if (searchForm.classList.contains('active')) {
    searchForm.querySelector('input').focus();
  }
});

// 点击页面其他区域隐藏表单
document.addEventListener('click', (e) => {
  const isClickInside = searchForm.contains(e.target) || searchIcon.contains(e.target);
  if (!isClickInside) {
    searchForm.classList.remove('active');
  }
});

// 滚动页面时隐藏表单
window.addEventListener('scroll', () => {
  searchForm.classList.remove('active');
});

关键逻辑说明 #

• 点击图标时用stopPropagation()阻止事件冒泡，避免触发全局点击的隐藏逻辑
• 全局点击事件通过contains()判断点击目标是否在表单或图标范围内，不在则隐藏表单
• 滚动事件直接移除active类，实现滚动时自动隐藏

内容的提问来源于stack exchange，提问作者The DST