jQuery：點擊外部元素「關閉」菜單，使用toggleClass出現

Question

我已經構建了一些導航（用於移動網絡），它使用jQuery中的toggleClass方法來隱藏和顯示菜單。點擊'MENU'圖標/按鈕切換菜單div的開關狀態'.active'（display：hidden）。

我一直在拼命尋找一種方法，通過點擊它的外部（頁面上的任何位置）來隱藏菜單。目前，關閉菜單的唯一方法是再次單擊菜單按鈕，將div切換回.active類（隱藏）。

我一直沒有找到任何類似的例子與解決方案如何完成。

$(document).ready(function() { 
 
    $(".toggle-nav").click(function(e) { 
 
     $(this).toggleClass("active"); 
 
     $(".menu ul").toggleClass("active"); 
 
    
 
     e.preventDefault(); 
 
    }); 
 
\t 
 
\t 
 
});

/* .toggle-nav is the menu icon/button. */ 
 

 
.toggle-nav { 
 
\t font-size: 20px; 
 
\t margin-left: 7px; 
 
} 
 

 
/* The .active class hides the menu by default. 
 
When .toggle-nav (menu icon) is clicked, .active class is 'turned off', 
 
revealing the menu. When clicked again, it hides the menu. */ 
 

 
.menu ul.active { 
 
\t display: none; \t 
 
} 
 

 
.menu ul { 
 
\t width: 10em; 
 
\t position: absolute; 
 
\t top: 60%; 
 
\t padding: 10px 18px; 
 
\t background: #e6e5e4; 
 
} 
 

 
.menu li { 
 
\t margin: 5px 0px 5px 0px; 
 
\t float: none; 
 
\t display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="menu"> 
 

 
<a class="toggle-nav" href="#">MENU</a> 
 

 
<ul class="active"> 
 
<li><a href="#">Item One</a></li> 
 
<li><a href="#">Item Two</a></li> 
 
<li><a href="#">Item Three</a></li> 
 
</ul> 
 

 
</div>

Answer 1

爲了使這個應用$(document).click()用於檢測頁面上點擊並添加stopPropagation()爲$(".toggle-nav").click爲只使點擊菜單。

請嘗試：

$(document).ready(function() { 
 
    $(".toggle-nav").click(function(e) { 
 
     e.stopPropagation(); 
 
     e.preventDefault(); 
 
     $(this).toggleClass("active"); 
 
     $(".menu ul").toggleClass("active"); 
 
    }); 
 
\t $(document).click(function(e){ 
 
     if(!e.target.closest("ul") && $(".menu a").hasClass("active")){ 
 
     $(".menu ul").toggleClass("active"); 
 
     $(".toggle-nav").toggleClass("active"); 
 
     } 
 
    }) 
 
\t 
 
});

/* .toggle-nav is the menu icon/button. */ 
 

 
.toggle-nav { 
 
\t font-size: 20px; 
 
\t margin-left: 7px; 
 
} 
 

 
/* The .active class hides the menu by default. 
 
When .toggle-nav (menu icon) is clicked, .active class is 'turned off', 
 
revealing the menu. When clicked again, it hides the menu. */ 
 

 
.menu ul.active { 
 
\t display: none; \t 
 
} 
 

 
.menu ul { 
 
\t width: 10em; 
 
\t position: absolute; 
 
\t top: 60%; 
 
\t padding: 10px 18px; 
 
\t background: #e6e5e4; 
 
} 
 

 
.menu li { 
 
\t margin: 5px 0px 5px 0px; 
 
\t float: none; 
 
\t display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="menu"> 
 

 
<a class="toggle-nav" href="#">MENU</a> 
 

 
<ul class="active"> 
 
<li><a href="#">Item One</a></li> 
 
<li><a href="#">Item Two</a></li> 
 
<li><a href="#">Item Three</a></li> 
 
</ul> 
 

 
</div>

Answer 2

我的HTML代碼：

<div class="click-nav"> 
    <ul class="no-js"> 
    <li> 
     <a href="#" class="clicker"><img src="img/i-1.png" alt="Icon">Profile</a> 
     <ul> 
     <li><a href="#"><img src="img/i-2.png" alt="Icon">Dashboard</a></li> 
     <li><a href="#"><img src="img/i-3.png" alt="Icon">Settings</a></li> 
     <li><a href="#"><img src="img/i-4.png" alt="Icon">Privacy</a></li> 
     <li><a href="#"><img src="img/i-5.png" alt="Icon">Help</a></li> 
     <li><a href="#"><img src="img/i-6.png" alt="Icon">Sign out</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

CSS：

.click-nav {margin:100px auto;width:200px;} 
.click-nav ul {position:relative;font-weight:900;} 
.click-nav ul li {position:relative;list-style:none;cursor:pointer;} 
.click-nav ul li ul {position:absolute;left:0;right:0;} 
.click-nav ul .clicker {position:relative;background:#2284B5;color:#FFF;} 
.click-nav ul .clicker:hover,.click-nav ul .active {background:#196F9A;} 
.click-nav img {position:absolute;top:9px;left:12px;} 
.click-nav ul li a {transition:background-color 0.2s ease-in-out;-webkit-transition:background-color 0.2s ease-in-out; 
-moz-transition:background-color 0.2s ease-in-out;display:block;padding:8px 10px 8px 40px;background:#FFF;color:#333;text-decoration:none;} 
.click-nav ul li a:hover {background:#F2F2F2;} 

/* Fallbacks */ 
.click-nav .no-js ul {display:none;} 
.click-nav .no-js:hover ul {display:block;} 

JQuery的：

$(function() { 
    $('.click-nav > ul').toggleClass('no-js js'); 
    $('.click-nav .js ul').hide(); 
    $('.click-nav .js').click(function(e) { 
    $('.click-nav .js ul').slideToggle(200); 
    $('.clicker').toggleClass('active'); 
    e.stopPropagation(); 
    }); 
    $(document).click(function() { 
    if ($('.click-nav .js ul').is(':visible')) { 
     $('.click-nav .js ul', this).slideUp(); 
     $('.clicker').removeClass('active'); 
    } 
    }); 
}); 

我已經嘗試這樣做，它的工作非常好。 所以我希望這將工作...