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文档就绪之外清除你的var声明

如何使用全局变量使用jQuery隐藏/显示div

3 个答案: