如何使用全局变量使用 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

Answer 2

抱歉，

我在手机上，所以很简洁。 您可以将事件侦听器添加到窗口/文档，如果目标不在搜索元素中，请将其隐藏。

单击放大镜可能应该将焦点放在搜索输入框上，以便可用性更加流畅（他们必须认真单击才能将其关闭）。

Answer 3

在 jquery 文档之外噗