彈出導航菜單關閉時，點擊

Question

頁面的任何空白部分

我目前的項目有對左上角的浮動切換，切換和菜單時彈出頁面的左側導航菜單。單擊鏈接時，如果再次單擊#menutoggle，或者菜單右上角有一個菜單關閉按鈕[x]，菜單會自動關閉。我想添加關閉菜單的功能，只需點擊菜單外的任何地方 - 或頁面的任何空白部分。我確信這是對當前腳本的一個簡單補充 - 我嘗試了一些東西，但沒有成功。任何幫助提出正確的代碼將不勝感激！

//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)

//CSS 
 
/* ========================================================================== 
 
    MENU CONFIGURATION 
 
    ========================================================================== */ 
 

 
.menu { 
 
\t position: fixed; 
 
\t right: -200px; 
 
\t width: 260px; 
 
\t height: 100%; 
 
\t top: 0; 
 
\t z-index: 10; 
 
\t text-align: left; 
 
} 
 

 
.menu.menu-open { 
 
\t right: 0px; 
 
} 
 

 
.menu-wrap { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 60px; 
 
\t background: #1a1a1a; 
 
\t opacity: 0.9; 
 
\t width: 200px; 
 
\t height: 100%; 
 
} 
 

 
.menu h1.logo a { 
 
\t font-family: "Oswald", sans-serif; 
 
\t font-size: 16px; 
 
\t font-weight: 700; 
 
\t letter-spacing: 0.15em; 
 
\t line-height: 40px; 
 
\t text-transform: uppercase; 
 
\t color: #ffffff; 
 
\t margin-top: 20px; 
 
} 
 

 
.menu h1.logo a:hover { 
 
\t color: #ffffff; 
 
} 
 

 
.menu img.logo { 
 
\t margin: 20px 0; 
 
\t max-width: 160px; 
 
} 
 

 
.menu a { 
 
\t margin-left: 20px; 
 
\t color: #808080; 
 
\t display: block; 
 
\t font-size: 12px; 
 
\t font-weight: 700; 
 
\t line-height: 40px; 
 
\t letter-spacing: 0.1em; 
 
\t text-transform: uppercase; 
 
} 
 

 
.menu a:hover { 
 
\t color: #ffffff; 
 
} 
 

 
.menu a:active { 
 
\t color: #ffffff; 
 
} 
 

 
.menu a > i { 
 
\t float: left; 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t text-align: left; 
 
\t width: 28px; 
 
\t font-size: 30px; 
 
\t line-height: 40px; 
 
\t margin: 25px 2px; 
 
} 
 

 
.menu-close { 
 
\t cursor: pointer; 
 
\t display: block; 
 
\t position: absolute; 
 
\t font-size: 14px; 
 
\t color: #808080; 
 
\t width: 40px; 
 
\t height: 40px; 
 
\t line-height: 40px; 
 
\t top: 20px; 
 
\t right: 5px; 
 
\t -webkit-transition: all .1s ease-in-out; 
 
\t -moz-transition: all .1s ease-in-out; 
 
\t \t -ms-transition: all .1s ease-in-out; 
 
\t \t -o-transition: all .1s ease-in-out; 
 
\t \t \t transition: all .1s ease-in-out; 
 
} 
 

 
.menu-close:hover { 
 
\t color: #ffffff; 
 
\t -webkit-transition: all .1s ease-in-out; 
 
\t -moz-transition: all .1s ease-in-out; 
 
\t \t -ms-transition: all .1s ease-in-out; 
 
\t \t -o-transition: all .1s ease-in-out; 
 
\t \t \t transition: all .1s ease-in-out; 
 
} 
 

 
/* Push the body after clicking the menu button */ 
 
.body-push { 
 
\t overflow-x: hidden; 
 
\t position: relative; 
 
\t left: 0; 
 
} 
 

 
.body-push-toright { 
 
\t left: 200px; 
 
} 
 

 
.body-push-toleft { 
 
\t left: -200px; 
 
} 
 

 
.menu, 
 
.body-push { 
 
\t -webkit-transition: all .3s ease; 
 
\t -moz-transition: all .3s ease; 
 
\t \t -ms-transition: all .3s ease; 
 
\t \t -o-transition: all .3s ease; 
 
\t \t \t transition: all .3s ease; 
 
} 
 

 
#menuToggle { 
 
\t position: absolute; 
 
\t top: 20px; 
 
\t left: 0; 
 
\t z-index: 11; 
 
\t display: block; 
 
\t text-align: center; 
 
\t font-size: 14px; 
 
\t color: #ffffff; 
 
\t width: 40px; 
 
\t height: 40px; 
 
\t line-height: 40px; 
 
\t cursor: pointer; 
 
\t background: rgba(0,0,0,0.25); 
 
\t -webkit-transition: all .1s ease-in-out; 
 
\t -moz-transition: all .1s ease-in-out; 
 
\t \t -ms-transition: all .1s ease-in-out; 
 
\t \t -o-transition: all .1s ease-in-out; 
 
\t \t \t transition: all .1s ease-in-out; 
 
} 
 

 
#menuToggle:hover { 
 
\t color: #ffffff; 
 
\t background: rgba(0,0,0,0.2); 
 
\t -webkit-transition: all .1s ease-in-out; 
 
\t -moz-transition: all .1s ease-in-out; 
 
\t \t -ms-transition: all .1s ease-in-out; 
 
\t \t -o-transition: all .1s ease-in-out; 
 
\t \t \t transition: all .1s ease-in-out; 
 
}

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

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'); 
    } 
});