我有一些HTML菜单,当用户单击这些菜单的头部时,我会完全显示这些菜单。当用户在菜单区域外单击时,我希望隐藏这些元素。

jQuery是否可以实现这样的功能?

$("#menuscontainer").clickOutsideThisElement(function() {
    // Hide the menus
});

当前回答

尝试以下代码:

if ($(event.target).parents().index($('#searchFormEdit')) == -1 &&
    $(event.target).parents().index($('.DynarchCalendar-topCont')) == -1 &&
    (_x < os.left || _x > (os.left + 570) || _y < os.top || _y > (os.top + 155)) &&
    isShowEditForm) {

    setVisibleEditForm(false);
}

其他回答

$(document).on("click",function (event)   
 {   
     console.log(event);
   if ($(event.target).closest('.element').length == 0)
     {
    //your code here
      if ($(".element").hasClass("active"))
      {
        $(".element").removeClass("active");
      }
     }
 });

尝试此编码以获得解决方案。

如果您正在为IE和FF 3.*编写脚本,并且您只想知道单击是否发生在某个框区域内,您也可以使用以下内容:

this.outsideElementClick=函数(objEvent,objElement){var objCurrentElement=objEvent.target | | objEvent.srcElement;var blnSideX=false;var blnSideY=false;如果(objCurrentElement.getBoundingClientRect().left>=objElement.getBoundingClientRect().left&&objCurrentElement.getBoundingClientRectblnSideX=真;如果(objCurrentElement.getBoundingClientRect().top>=objElement.getBoundingClientRect().ttop&&objCurrentElement.getBoundingClientRectblnSideY=真;如果(blnSideX&&blnSideY)return false;其他的返回true;}

这对我来说非常有效!!

$('html').click(function (e) {
    if (e.target.id == 'YOUR-DIV-ID') {
        //do something
    } else {
        //do something
    }
});

这是面向未来观众的普通JavaScript解决方案。

单击文档中的任何元素时,如果已切换所单击元素的id,或者隐藏元素未隐藏且隐藏元素不包含所单击元素,则切换该元素。

(function () {
    "use strict";
    var hidden = document.getElementById('hidden');
    document.addEventListener('click', function (e) {
        if (e.target.id == 'toggle' || (hidden.style.display != 'none' && !hidden.contains(e.target))) hidden.style.display = hidden.style.display == 'none' ? 'block' : 'none';
    }, false);
})();

(函数(){“使用严格”;var hidden=document.getElementById('hidden');document.addEventListener('click',函数(e){如果(e.target.id==“toggle”| |(hidden.style.display!=“none”&&!hidden.concloss(e.target)))hidden.syle.display=hidden.sstyle.display==“none?”block':'无';},假);})();<a href=“javascript:void(0)”id=“toggle”>切换隐藏潜水</a><div id=“hidden”style=“display:none;”>此内容通常是隐藏的。单击此内容以外的任何位置,使我消失</div>

如果您要在同一页面上进行多个切换,可以使用以下方式:

将隐藏的类名添加到可折叠项中。单击文档后,关闭所有不包含所单击元素且未隐藏的隐藏元素如果单击的元素是切换,请切换指定的元素。

(函数(){“使用严格”;var hiddenItems=document.getElementsByClassName('hidden'),隐藏;document.addEventListener('click',函数(e){for(var i=0;hidden=hiddenItems[i];i++){如果(!hidden.contains(e.target)&&hidden.style.display!='无”)hidden.style.display=“无”;}if(e.target.getAttribute('data-toggle')){var toggle=document.querySelector(e.target.getAttribute('data-toggle'));toggle.style.display=toggle.style.display==“无”?'block':'无';}},假);})();<a href=“javascript:void(0)”data toggle=“#hidden1”>切换隐藏潜水</a><div class=“hidden”id=“hidden1”style=“display:none;”data hidden=“true”>此内容通常隐藏</div><a href=“javascript:void(0)”data toggle=“#hidden2”>切换隐藏潜水</a><div class=“hidden”id=“hidden2”style=“display:none;”data hidden=“true”>此内容通常隐藏</div><a href=“javascript:void(0)”data toggle=“#hidden3”>切换隐藏潜水</a><div class=“hidden”id=“hidden3”style=“display:none;”data hidden=“true”>此内容通常隐藏</div>

我在以下方面取得了成功:

var $menuscontainer = ...;

$('#trigger').click(function() {
  $menuscontainer.show();

  $('body').click(function(event) {
    var $target = $(event.target);

    if ($target.parents('#menuscontainer').length == 0) {
      $menuscontainer.hide();
    }
  });
});

逻辑是:当显示#菜单容器时,仅当(单击的)目标不是它的子对象时,才将一个单击处理程序绑定到隐藏#菜单容器的主体。