移动端视图隐藏搜索框仅显搜索图标，点击图标唤起搜索框的实现方法

嘿，这个需求在移动端项目里太常见了！我给你拆解成两步，用HTML、CSS（结合你提到的Bootstrap glyphicon）和一点点JS就能完美实现👇

第一步：移动端默认隐藏搜索框，仅显示搜索图标 #

首先我们得先搭好HTML结构，把搜索框和图标放在同一个容器里，方便定位和控制：

<div class="search-container">
  <input type="text" class="search-input" placeholder="输入关键词搜索...">
  <span class="glyphicon glyphicon-search search-icon"></span>
</div>

接下来写CSS，先处理基础样式（非移动端正常显示），再用媒体查询针对移动端做隐藏逻辑：

/* 基础样式：非移动端状态，搜索框和图标正常显示 */
.search-container {
  position: relative;
  display: inline-block;
}

.search-input {
  padding: 6px 30px 6px 12px; /* 右侧留位置给图标 */
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 200px;
  /* 加个过渡动画，让显示/隐藏更平滑 */
  transition: all 0.3s ease;
}

.search-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  cursor: pointer;
}

/* 移动端媒体查询：默认隐藏搜索框，仅显示图标 */
@media (max-width: 768px) {
  .search-input {
    display: none;
  }

  /* 调整图标样式，让它在移动端更显眼 */
  .search-icon {
    position: static;
    transform: none;
    font-size: 1.4rem;
    padding: 6px;
  }
}

第二步：点击搜索图标，切换搜索框的显示/隐藏 #

这一步需要用JavaScript监听图标的点击事件，来控制搜索框的显示状态。这里推荐用类切换的方式，比直接操作style更易维护：

方式1：用CSS类控制（推荐） #

先修改CSS，把隐藏逻辑改成类的形式：

/* 替换之前媒体查询里的display:none，用类控制 */
.search-input.hidden {
  display: none;
}

然后写JS代码：

// 获取DOM元素
const searchIcon = document.querySelector('.search-icon');
const searchInput = document.querySelector('.search-input');

// 监听图标点击事件
searchIcon.addEventListener('click', () => {
  // 切换隐藏类
  searchInput.classList.toggle('hidden');
  
  // 如果显示了搜索框，自动聚焦（提升用户体验）
  if (!searchInput.classList.contains('hidden')) {
    searchInput.focus();
  } else {
    // 隐藏时清空输入框内容
    searchInput.value = '';
  }
});

// 可选优化：点击页面其他区域时，自动隐藏搜索框
document.addEventListener('click', (e) => {
  const container = document.querySelector('.search-container');
  // 判断点击的元素是否在搜索容器外
  if (!container.contains(e.target)) {
    searchInput.classList.add('hidden');
    searchInput.value = '';
  }
});

方式2：直接操作style（快速实现） #

如果不想加额外的类，也可以直接操作元素的display属性：

const searchIcon = document.querySelector('.search-icon');
const searchInput = document.querySelector('.search-input');

searchIcon.addEventListener('click', () => {
  // 判断当前状态，切换显示/隐藏
  if (searchInput.style.display === 'none' || searchInput.style.display === '') {
    searchInput.style.display = 'inline-block';
    searchInput.focus();
  } else {
    searchInput.style.display = 'none';
    searchInput.value = '';
  }
});

一些额外优化小技巧 #

• 给搜索框添加autocomplete="off"属性，避免浏览器自动填充干扰体验；
• 可以给图标添加点击时的动画效果，比如缩小再放大，增强交互反馈；
• 如果是Vue/React等框架项目，可以用状态管理（比如data/useState）来控制显示，逻辑会更简洁。

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