Question

我当前的项目有一个导航菜单，左上角有一个浮动切换，当切换时，页面左侧弹出菜单。单击链接时，如果再次单击#menutoggle，或者菜单右上角有一个menuclose按钮[x]，菜单会自动关闭。我想通过简单地点击菜单外的任何地方 - 或页面的任何空白部分来添加关闭菜单的功能。我确信这是对当前脚本的一个简单补充 - 我尝试了一些但没有成功的事情。任何有关提出正确代码的帮助都将不胜感激！

＆＃13;

//JAVASCRIPT
// Menu settings

;(function(){
$('#menuToggle, .menu-close').on('click', function(){
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toleft');
$('#theMenu').toggleClass('menu-open');
});
$('.smoothScroll').on('click',function(){
$('#menuToggle').removeClass('active');
$('body').removeClass('body-push-toleft');
$('#theMenu').removeClass('menu-open');
});


})(jQuery)

＆＃13;

//CSS
/* ==========================================================================
   MENU CONFIGURATION
   ========================================================================== */

.menu {
	position: fixed;
	right: -200px;
	width: 260px;
	height: 100%;
	top: 0;
	z-index: 10;
	text-align: left;
}

.menu.menu-open {
	right: 0px;
}

.menu-wrap {
	position: absolute;
	top: 0;
	left: 60px;
	background: #1a1a1a;
	opacity: 0.9;
	width: 200px;
	height: 100%;
}

.menu h1.logo a {
	font-family: "Oswald", sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.15em;
	line-height: 40px;
	text-transform: uppercase;
	color: #ffffff;
	margin-top: 20px;
}

.menu h1.logo a:hover {
	color: #ffffff;
}

.menu img.logo {
	margin: 20px 0;
	max-width: 160px;
}

.menu a {
	margin-left: 20px;
	color: #808080;
	display: block;
	font-size: 12px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.menu a:hover {
	color: #ffffff;
}

.menu a:active {
	color: #ffffff;
}

.menu a > i {
	float: left;
	display: inline-block;
	vertical-align: middle; 
	text-align: left;
	width: 28px;
	font-size: 30px;
	line-height: 40px;
	margin: 25px 2px;
}

.menu-close {
	cursor: pointer;
	display: block;
	position: absolute;
	font-size: 14px;
	color: #808080;
	width: 40px;
	height: 40px;
	line-height: 40px;
	top: 20px;
	right: 5px;
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}

.menu-close:hover {
	color: #ffffff;
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}

/* Push the body after clicking the menu button */
.body-push {
	overflow-x: hidden;
	position: relative;
	left: 0;
}

.body-push-toright {
	left: 200px;
}

.body-push-toleft {
	left: -200px;
}

.menu,
.body-push {
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
		-ms-transition: all .3s ease;
		 -o-transition: all .3s ease;
			transition: all .3s ease;
}

#menuToggle {
	position: absolute;
	top: 20px;
	left: 0;
	z-index: 11;
	display: block;
	text-align: center;
	font-size: 14px;
	color: #ffffff;
	width: 40px;
	height: 40px;
	line-height: 40px;
	cursor: pointer;
	background: rgba(0,0,0,0.25);
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}

#menuToggle:hover {
	color: #ffffff;
	background: rgba(0,0,0,0.2);
	-webkit-transition: all .1s ease-in-out;
	   -moz-transition: all .1s ease-in-out;
		-ms-transition: all .1s ease-in-out;
		 -o-transition: all .1s ease-in-out;
			transition: all .1s ease-in-out;
}

＆＃13;

//HTML
<!-- Menu -->
	<nav class="menu" id="theMenu">
		<div class="menu-wrap">
			<h1 class="logo"><a href="index.html#home">NAVIGATE</a></h1>
			<i class="fa fa-times menu-close"></i>
			<a href="#home" class="smoothScroll">Home</a>
			<a href="#about" class="smoothScroll">About</a>
            <a href="#testimonials" class="smoothScroll">Testimonials</a>
			<a href="#portfolio" class="smoothScroll">VIDEO SAMPLES</a>
			<a href="#services" class="smoothScroll">AUDIO SAMPLES</a>
            <a href="#bio" class="smoothScroll">WORK HISTORY </BR>SONG LIST</a>
			<a href="#contact" class="smoothScroll">Contact</a>
			<a href="tel:PHONE REMOVED"><i class="fa fa-phone-square"></i></a>
			<a href="SITE REMOVED" target="_blank"><i class="fa fa-facebook-square"></i></a>
            <a href="mailto:EMAIL REMOVED"><i class="fa fa-envelope"></i></a>
            
            
      
		</div>
		
		<!-- Menu button -->
		<div id="menuToggle"><i class="fa fa-bars"></i></div>
	</nav>

＆＃13;

Answer 1

这里有一个关于这个问题的流行答案： How do I detect a click outside an element?

但重要的是要查看评论和后续文章，这些文章提出了更好的选择 https://css-tricks.com/dangers-stopping-event-propagation/

$(document).on('click', function(event) {
    if (!$(event.target).closest('#theMenu').length) {
      $('#theMenu').removeClass('menu-open');
    }
});

弹出导航菜单以在单击页面的任何空白部分时关闭

1 个答案: