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

Question

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

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

发生了很多事情，所以这是我的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> 

Answer 1

尝试使用blur 。

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