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

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

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

当前回答

使用not():

$("#id").not().click(function() {
    alert('Clicked other that #id');
});

其他回答

Use:

var go = false;
$(document).click(function(){
    if(go){
        $('#divID').hide();
        go = false;
    }
})

$("#divID").mouseover(function(){
    go = false;
});

$("#divID").mouseout(function (){
    go = true;
});

$("btnID").click( function(){
    if($("#divID:visible").length==1)
        $("#divID").hide(); // Toggle
    $("#divID").show();
});

这是我的代码:

// Listen to every click
$('html').click(function(event) {
    if ( $('#mypopupmenu').is(':visible') ) {
        if (event.target.id != 'click_this_to_show_mypopupmenu') {
            $('#mypopupmenu').hide();
        }
    }
});

// Listen to selector's clicks
$('#click_this_to_show_mypopupmenu').click(function() {

  // If the menu is visible, and you clicked the selector again we need to hide
  if ( $('#mypopupmenu').is(':visible') {
      $('#mypopupmenu').hide();
      return true;
  }

  // Else we need to show the popup menu
  $('#mypopupmenu').show();
});

这是面向未来观众的普通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>

作为Art这个伟大答案的包装,并使用OP最初要求的语法,这里有一个jQuery扩展,它可以记录在集合元素之外是否发生了单击。

$.fn.clickOutsideThisElement = function (callback) {
    return this.each(function () {
        var self = this;
        $(document).click(function (e) {
            if (!$(e.target).closest(self).length) {
                callback.call(self, e)
            }
        })
    });
};

然后你可以这样打电话:

$("#menuscontainer").clickOutsideThisElement(function() {
    // handle menu toggle
});

这是小提琴演示

只是一个警告,使用这个:

$('html').click(function() {
  // Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

它阻止RubyonRails UJS驱动程序正常工作。例如,link_to“click”、“/url”、:method=>:delete将不起作用。

这可能是一种变通方法:

$('html').click(function() {
  // Hide the menus if visible
});

$('#menucontainer').click(function(event){
  if (!$(event.target).data('method')) {
    event.stopPropagation();
  }
});