使用jQuery为搜索输入框添加/移除CSS类

嘿，这个问题我之前做项目时也碰到过！要实现点击搜索框外部移除grey-line类，核心思路就是监听全局的点击事件，然后判断点击的区域是否属于搜索相关元素，不属于的话就移除类。下面给你两种可行的解决方案：

方案一：阻止事件冒泡+全局监听 #

这种方式逻辑直观，适合静态渲染的搜索组件：

// Header Search Handler
function headerSearchHandler() {
  // 注意：这里的选择器要根据你的实际HTML结构调整，比如header-search是ID的话要加#，类的话加.
  var $searchInput = $("#header-search input[type=text]"),
      $searchIcon = $("#header-search .search-icon");

  // 点击搜索图标，添加类并阻止事件冒泡
  $searchIcon.on("click", function(e) {
    e.stopPropagation(); // 避免触发后续的全局点击事件
    $searchInput.addClass("grey-line");
    $searchInput.focus(); // 可选：自动聚焦输入框，提升用户体验
  });

  // 点击输入框内部时，同样阻止冒泡，防止误触发移除逻辑
  $searchInput.on("click", function(e) {
    e.stopPropagation();
  });

  // 全局监听document点击，移除类
  $(document).on("click", function() {
    $searchInput.removeClass("grey-line");
  });
}

// 页面加载完成后初始化函数
$(document).ready(function() {
  headerSearchHandler();
});

方案二：事件委托+目标判断（更优雅） #

如果你的搜索组件是动态生成的，或者想让代码更简洁，可以用这种方式，不需要单独阻止元素冒泡：

function headerSearchHandler() {
  var $searchContainer = $("#header-search"); // 搜索组件的外层容器
  var $searchInput = $searchContainer.find("input[type=text]");

  // 点击搜索图标添加类
  $searchContainer.on("click", ".search-icon", function(e) {
    $searchInput.addClass("grey-line").focus();
  });

  // 全局点击事件：判断点击目标是否在搜索容器内
  $(document).on("click", function(e) {
    // 如果点击的不是容器本身，也不是容器的子元素，就移除类
    if (!$searchContainer.is(e.target) && $searchContainer.has(e.target).length === 0) {
      $searchInput.removeClass("grey-line");
    }
  });
}

$(document).ready(function() {
  headerSearchHandler();
});

关键注意点 #

• 确保你的选择器（比如#header-search）和实际HTML结构匹配，别写错ID/类名；
• 如果用方案一，一定要给搜索图标和输入框加e.stopPropagation()，否则点击这些元素时也会触发全局的移除逻辑；
• 方案二更适合动态DOM场景，因为用了事件委托，不需要担心元素后期生成导致事件绑定失效。

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