如何通过点击外部关闭汉堡包菜单

Question

我试图通过单击菜单外部来关闭汉堡包菜单。现在关闭汉堡菜单的唯一方法是点击X图标。我仍然希望菜单能够通过点击图标来关闭，但也可以通过点击菜单以外的选项来关闭菜单。有没有人有任何解决方案？

的jsfiddle - https://jsfiddle.net/1h3eoewa/

jQuery(document).ready(function() { 
 
    jQuery(".submenu").slideUp("fast"); 
 
    jQuery(".menutoggle").click(function() { 
 
    var id = jQuery(this).attr("id").replace("toggle", "submenu"); 
 
    jQuery("#" + id).slideToggle("fast"); 
 
    }); 
 

 
    jQuery("#hamburger-nav-icon").click(function() { 
 
    jQuery(this).toggleClass("open"); 
 
    jQuery("body").css("overflow", "hidden"); 
 
    if (jQuery("#hamburger-menu-cover").css("opacity") == "0") { 
 
     jQuery("#hamburger-menu-cover").css("opacity", "1"); 
 
     jQuery("#hamburger-menu-cover").fadeIn(300).css("display", "table"); 
 
     jQuery("body").css("overflow", "hidden"); 
 
    } else { 
 
     jQuery("#hamburger-menu-cover").css("opacity", "0"); 
 
     jQuery("#hamburger-menu-cover").fadeOut(300).css("display", "none"); 
 
     jQuery("body").css("overflow", "visible"); 
 
    } 
 
    }); 
 
});

/*-------------------------------------------------------------- 
 
## Hamburger Menu 
 
--------------------------------------------------------------*/ 
 
#hamburger-menu-cover { 
 
    z-index: 5; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(255, 255, 255, 0.9); 
 
    position: fixed; 
 
    font-size: 1.5em; 
 
    text-align: center; 
 
    right: 0px; 
 
    top: 0px; 
 
    opacity: 0; 
 
    display: none; 
 
    overflow-y: scroll; 
 
    -webkit-overflow-scrolling: touch; 
 
    overflow: hidden; 
 
} 
 
.hamburger-menu { 
 
    background: #fff; 
 
    width: 432px; 
 
    height: 100%; 
 
    border-right: 1px solid #808080; 
 
    position: fixed; 
 
    top: 0px; 
 
    overflow-y: scroll; 
 
    -webkit-overflow-scrolling: touch; // mobile safari 
 
} 
 
.hamburger-menu-container { 
 
    margin-left: 33px; 
 
    margin-top: 100px; 
 
    padding-right: 32px; 
 
    padding-bottom: 40px; 
 
    overflow-y: scroll; 
 
    -webkit-overflow-scrolling: touch; // mobile safari 
 
} 
 
.hamburger-menu-links li { 
 
    list-style: none; 
 
    font-family: 'freightlight'; 
 
    font-size: 36px; 
 
    display: block; 
 
    line-height: 57px; 
 
    font-style: italic; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    text-align: justify; 
 
} 
 
.hamburger-menu-links li a { 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 
.hamburger-menu-links li a:hover { 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 
.hamburger-menu-links li a:active { 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 
.hamburger-menu-links li a:visited { 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 
.hamburger-menu-links ul { 
 
    border-bottom: 1px solid #808080; 
 
    padding-bottom: 30px; 
 
} 
 
.submenu li { 
 
    font-size: 16px; 
 
    font-family: 'Raleway', sans-serif; 
 
    line-height: 36px; 
 
    font-weight: 600; 
 
    letter-spacing: 2px; 
 
    font-style: normal; 
 
} 
 
.hamburger-menu-social-links h3 { 
 
    margin-left: 40px; 
 
    padding-right: 32px; 
 
    margin-top: 47px; 
 
    padding-bottom: 0px; 
 
    list-style: none; 
 
    font-family: 'freightlight'; 
 
    font-size: 18px; 
 
    display: block; 
 
    font-style: italic; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    text-align: justify; 
 
    letter-spacing: 0px; 
 
} 
 
.hamburger-menu-social-links { 
 
    padding-right: 0px; 
 
    letter-spacing: 12px; 
 
} 
 

 
#hamburger-nav-icon { 
 
    z-index: 20; 
 
    width: 50px; 
 
    height: 35px; 
 
    position: relative; 
 
    margin: 35px 30px; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -webkit-transition: .5s ease-in-out; 
 
    -moz-transition: .5s ease-in-out; 
 
    -o-transition: .5s ease-in-out; 
 
    transition: .5s ease-in-out; 
 
    cursor: pointer; 
 
} 
 

 
#hamburger-nav-icon span { 
 
    display: block; 
 
    position: absolute; 
 
    height: 5px; 
 
    width: 40px; 
 
    background: #000; 
 
    opacity: 1; 
 
    left: 0; 
 
} 
 

 
/* Icon 3 */ 
 

 
#hamburger-nav-icon span:nth-child(1) { 
 
    top: 0px; 
 
} 
 

 
#hamburger-nav-icon span:nth-child(2), #hamburger-nav-icon span:nth-child(3) { 
 
    top: 12px; 
 
} 
 

 
#hamburger-nav-icon span:nth-child(4) { 
 
    top: 24px; 
 
} 
 

 
#hamburger-nav-icon.open span:nth-child(1) { 
 
    top: 8px; 
 
    width: 0%; 
 
    left: 50%; 
 
} 
 

 
#hamburger-nav-icon.open span:nth-child(2) { 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 
#hamburger-nav-icon.open span:nth-child(3) { 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
} 
 

 
#hamburger-nav-icon.open span:nth-child(4) { 
 
    top: 8px; 
 
    width: 0%; 
 
    left: 50%; 
 
} 
 
#toggle1, #toggle2, #toggle4, #toggle7, #toggle8 { 
 
    font-size: 12px; 
 
    padding-left: 40px; 
 
    padding-top: 25px; 
 
    display: inline; 
 
    position: absolute; 
 
    color: #B2B2B2; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hamburger-nav-icon"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</div> 
 
<div id="hamburger-menu-cover"> 
 
    <div class="hamburger-menu"> 
 
    <div class="hamburger-menu-container"> 
 
     <div class="hamburger-menu-links"> 
 
     <ul> 
 
      <li><a href="#">Item 1<i class="fa fa-ellipsis-h menutoggle" id="toggle1" aria-hidden="true"></i></a></li> 
 
      <div class="submenu" id="submenu1"> 
 
      <li><a href="#">Sub Item 1</a></li> 
 
      <li><a href="#">Sub Item 2</a></li> 
 
      <li><a href="#">Sub Item 3</a></li> 
 
      <li><a href="#">Sub Item 4</a></li> 
 
      </div> 
 
      <li><a href="#">Item 2<i class="fa fa-ellipsis-h menutoggle" id="toggle2" aria-hidden="true"></i></a></li> 
 
      <div class="submenu" id="submenu2"> 
 
      <li><a href="#">Sub Item 1</a></li> 
 
      <li><a href="#">Sub Item 2</a></li> 
 
      <li><a href="#">Sub Item 3</a></li> 
 
      <li><a href="#">Sub Item 4</a></li> 
 
      </div> 
 
      <li><a href="#">Item 3</a></li> 
 
      <li><a href="#">Item 4<i class="fa fa-ellipsis-h menutoggle" id="toggle4" aria-hidden="true"></i></a></li> 
 
      <div class="submenu" id="submenu4"> 
 
      <li><a href="#">Sub Item 2</a></li> 
 
      <li><a href="#">Sub Item 3</a></li> 
 
      <li><a href="#">Sub Item 4</a></li> 
 
      </div> 
 
      <li><a href="#">Item 5</a></li> 
 
      <li><a href="#">Item 6</a></li> 
 
      <li><a href="#">Item 7<i class="fa fa-ellipsis-h menutoggle" id="toggle7" aria-hidden="true"></i></a></li> 
 
      <div class="submenu" id="submenu7"> 
 
      <li><a href="#">Sub Item 1</a></li> 
 
      <li><a href="#">Sub Item 2</a></li> 
 
      <li><a href="#">Sub Item 3</a></li> 
 
      <li><a href="#">Sub Item 4</a></li> 
 
      </div> 
 
      <li><a href="#">Item 8<i class="fa fa-ellipsis-h menutoggle" id="toggle8" aria-hidden="true"></i></a></li> 
 
      <div class="submenu" id="submenu8"> 
 
      <li><a href="#">Sub Item 1</a></li> 
 
      <li><a href="#">Sub Item 2</a></li> 
 
      <li><a href="#">Sub Item 3</a></li> 
 
      </div> 
 
     </ul> 
 
     </div> 
 
     <div class="hamburger-menu-social-links"> 
 
     <h3>Social</h3> 
 
     <a href="#" target="blank" title="twitter"> 
 
<img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-twitter.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-twitter.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-twitter.png'" /></a> 
 
     <a href="#" target="blank" title="Facebook"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-facebook.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-facebook.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-facebook.png'" /></a> 
 
     <a href="#" target="blank" title="Pinterest"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-pinterest.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-pinterest.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-pinterest.png'" /></a> 
 
     <a href="#" target="blank" title="Instagram"> 
 
<img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-instagram.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-instagram.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-instagram.png'" /> 
 
</a> 
 
     <a href="#" target="blank" title="Snapchat"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-snapchat.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-snapchat.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-snapchat.png'" /></a> 
 
     <a href="#" target="blank" title="Youtube"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-youtube.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-youtube.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-youtube.png'" /></a> 
 
     <a href="#" target="blank" title="Bloglovin"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-bloglovin.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-bloglovin.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-bloglovin.png'" /> 
 
</a> 
 
     </div> 
 

 

 
    </div> 
 
    </div> 
 
</div>

Answer 1

基本上，在body自身添加一个点击事件，只是确保你不想触发接近块单击事件与e.stopPropagation()什么。

jQuery('body').on('click', function() { 
    // code to close hamburger 
}); 

jQuery('.hamburger-menu').on('click', function (e) { 
    e.stopPropagation(); 
    // other code 
}); 

只需在打开它时应用这些，并在关闭它们时将其删除。

你可以添加它是这样的：

jQuery(document).ready(function() { 
    jQuery(".submenu").slideUp("fast"); 
    jQuery(".menutoggle").click(function(){ 
    var id = jQuery(this).attr("id").replace("toggle","submenu"); 
    jQuery("#" + id).slideToggle("fast");  
    }) 


const bodyClick = function() { jQuery('#hamburger-nav-icon').click() }; 

jQuery('#hamburger-nav-icon').click(function() { 
    jQuery(this).toggleClass('open'); 
     jQuery('body').css('overflow','hidden'); 
    jQuery('.#hamburger-menu').click(function (e) { e.stopPropagation(); }); 
    if (jQuery('#hamburger-menu-cover').css('opacity') == '0') { 
     jQuery('#hamburger-menu-cover').css('opacity', '1'); 
     jQuery('#hamburger-menu-cover').fadeIn(300).css('display', 'table'); 
     jQuery('body').css('overflow','hidden').on('click', bodyClick); 
    } else { 
     jQuery('#hamburger-menu-cover').css('opacity', '0'); 
     jQuery('#hamburger-menu-cover').fadeOut(300).css('display', 'none'); 
     jQuery('body').css('overflow','visible').off('click', bodyClick); 
    } 
    }); 
}); 

可能不是完美的，但应该给你做什么的想法。

Answer 2

基于@samanime答案，你也可以做这样的事情，检查每次点击当前文档并切换你的汉堡菜单时，点击的目的地不是汉堡包菜单：

jQuery('document').click(function(e) { 
    var elem = jQuery('.hamburger-menu'); 

    if(!elem.is(e.target)) { 
     elem.toggle(); // this has to be the code to collapse the burger menu 
    } 
}); 

Answer 3

您需要在文档中的任意位置单击鼠标右键，然后单击菜单。

$(document).click(function(e) { 
    if ($(this).parents('#hamburger-menu-cover')) { 
    return; 
    } 
    // code to close the menu 
});