javascript - 我如何使用全局变量来隐藏/显示使用 jQuery 的 div

Question

在仅适用于移动设备的网页上，我有一个放大镜搜索图标。单击该图标时，会出现包含搜索框的 div。如果用户决定不搜索某些内容，并单击搜索框 div 之外的任何位置，则应关闭该 div。

在我下面的代码中，全局变量不起作用。我试图在第一个函数中将其设置为 TRUE但在第二个函数中它不是真的。我知道这与变量作用域有关，并且我已经尝试了许多变体，但到目前为止我尝试过的都不起作用。

jQuery(document).ready(function() {

var searchDivOn = '';
jQuery('a#mobile-search').click(function(event){
    jQuery('#block-search-form').fadeIn('slow');
    searchDivOn = true;
    alert(searchDivOn);
    event.stopPropagation();

  });

 jQuery(':not(#block-search-form)').click(function(){  
      if(searchDivOn == true){
      jQuery('#block-search-form').fadeOut('fast');
      console.log('hello');
      searchDivOn = false;
      }
    });
})//End jQ doc ready

注意:如果我不使用全局变量，第二个函数无论如何都会触发并在打开后立即关闭 div。

Answer 1

您想要查看事件的目标，看看它是否是 #mobile-search 或 #mobile-search 本身的后代。您可以使用 .closest() 来完成此操作。

$(document).on('click', function (event) {
  var $target = $(event.target);
  if ($target.closest('#mobile-search').length === 0) {
    /* Then did not click inside #mobile-search */
  }
});

这是一个小演示:http://jsbin.com/tolitimuma/1/edit?html,js,output