时间戳

首页 > 解决方案 > 使用 jQuery 在搜索输入上添加/删除 CSS 类

javascript - 使用 jQuery 在搜索输入上添加/删除 CSS 类

问题描述

我有一个搜索字段，因此当您单击搜索图标时，会添加一个带有灰色下划线的类。我的问题是当我在搜索字段之外单击时无法删除该类。

有谁知道当用户在搜索字段外单击时如何删除灰线类？

发生了很多事情，所以这是我的 javascript 处理这个： 

//Header Search Handler
function headerSearchHandler() {
  var $searchInput = $(".header-search input[type=text]"),
    $searchSubmit = $(".header-search input[type=submit]"),
    $mobSearchBtn = $(".mobile-search-btn"),
    $myAccountText = $(".menu-utility-user .account-text"),
    $miniCart = $("#header #mini-cart"),
    $searchForm = $(".header-search form"),
    $headerPromo = $(".header-promo-area");


  //        
  $mobSearchBtn.on("click touchend", function(e) {

    $(this).hide();
    //$myAccountText.hide();
    $searchInput.show();
    $searchInput.addClass('grey-line');
    $searchSubmit.show();
    $miniCart.addClass("search-open");
    $searchForm.addClass("search-open");
    setTimeout(function() {
      $searchInput.addClass("active").focus();
    }, 500);
    e.stopPropogation();

  });

  $searchInput.on("click touchend", function(e) {
    $searchInput.addClass('grey-line');
    e.stopPropogation();

  }).blur(function(e) {
    var $this = $(this);

    if ($this.hasClass("active")) {
      $this.removeClass("active");
      $searchSubmit.hide();
      $mobSearchBtn.show();
      $miniCart.removeClass("search-open");
      $searchForm.removeClass("search-open");
    }
  });
  $('body').on("click", function(e) {
    if ($searchInput.hasClass('grey-line')) {
      $searchInput.removeClass('grey-line');
      e.stopPropogation();
    }
  });
} //End Header Search Handler
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>



<form id="search" role="search" onsubmit="return checkForm()" action="${searchPage}" method="get" name="simpleSearch">
  <fieldset>
    <legend aria-hidden="true" class="visually-hidden">${Resource.msg('simplesearch.searchCatalog', 'search', null)}</legend>
    <button class="mobile-search-btn" for="q" aria-hidden="false" aria-expanded="false" aria-controls="q" tabindex="0" aria-label="show search field button tap twice to open search input field">${Resource.msg('simplesearch.searchlabel', 'search', null)}</button>
    <input tabindex="0" type="text" id="q" name="q" value="" class="searchField" placeholder="${Resource.msg('simplesearch.searchtext', 'search', null)}" style="font-style:normal;" unbxdattr="sq" />
    <input tabindex="0" type="submit" name="go" value="${Resource.msg('simplesearch.searchtext', 'search', null)}" unbxdattr="sq_bt" />
  </fieldset>
</form>

标签： javascriptjquery

解决方案

尝试使用blur.

$('.searchFieldClass').blur(function() {
   $(this).removeClass('.greyLineClass');
});

推荐阅读