Question

我试图让我的汉堡菜单在菜单（.NavMenu）外面检测到点击，然后将汉堡包复选框更改为未选中。

我尝试使用event.stopPropagation();并尝试检测文档中的点击次数，但我的javascript知识确实有限，所以我要么根本无法显示.NavMenu，要么在点击外部时关闭.NavMenu但是汉堡菜单保持打开状态（X）。

任何人都可以帮我解决如何在div外部点击菜单以便触发复选框吗？

Answer 1

你可以通过给主要div提供一些id或类来实现这一点，它将保存你的页面内容然后在脚本中你可以检测是否在该div内部执行了点击：

考虑到您的主要div有 mainDiv 类，您可以将以下代码段添加到您的脚本中，以实现您的要求：

$(".mainDiv").click(function(){
    if($('#burger').is(':checked'))
    $('#burger').click();
});

Answer 2

在你的小提琴上试试这个：

$('#burger').click(function(event) {
 event.stopPropagation();
 if( $(this).is(':checked')) {
    $(".NavMenu").show();       
 } else {
    $(".NavMenu").hide();
 }
});  

$('body').click(function() {
  if ( $('#burger').is(':checked')) {
    $(".NavMenu").hide();
    $( "#burger" ).prop( "checked", false );
  }
})

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

http://jsfiddle.net/s9ndequ2/2/

Answer 3

使用class ='NavMenu'在div上添加id'burgerMenu'。

将您的JavaScript修改为

$('#burger').click(function() {
     if( $(this).is(':checked')) {
        $(".NavMenu").show();       
     } else {
        $(".NavMenu").hide();
     }
    });  
    $('body').click(function(event){
      removeBurger(event)
    })
    //this detects that user has clicked outside the menu
    function removeBurger(e){
      var targ;
      if (!e) {
          var e = window.event;
      }
      if (e.target) {
          targ=e.target;
      } else if (e.srcElement) {
          targ=e.srcElement;
      }
      if(targ.id!="burgerMenu" && targ.id!="burger"){
        if ( $('#burger').is(':checked')) {
        $(".NavMenu").hide();
        $( "#burger" ).prop( "checked", false );
      }
    }
    }

希望这会有所帮助。

Div切换复选框，但在div外部检测单击以关闭

3 个答案: