[英]Click Outside To close Dropdown Avatar Menu
我有這個頭像下拉菜單,你必須點擊頭像來關閉菜單,但我希望能夠點擊頁面上的任何地方來關閉菜單。 任何幫助將不勝感激。
下面是 html 和 javasript
<div class="user-menu-wrap">
<a class="mini-photo-wrapper" href="page.html" onclick="return false" style="cursor:pointer;"><img src="/images/default_avatar.png" /></a>
<div class="menu-container">
<ul class="user-menu" style="list-style:none;">
<li class="user-menu__item"><a class="user-menu-link" href="/member.php">Profile</a></li>
<li class="user-menu__item"><a class="user-menu-link" href="/private.php">Messages</a></li>
<li class="user-menu__item"><a class="user-menu-link" href="/friends">Friends</a></li>
<li class="user-menu__item"><a class="user-menu-link" href="/view-alerts">Alerts</a></li>
</ul>
</div>
document.querySelector('.mini-photo-wrapper').addEventListener('click', function() {
document.querySelector('.menu-container').classList.toggle('active');
});
window.onload = function(){
var divToHide = document.getElementById('divToHide');
document.onclick = function(e){
if(e.target.id !== 'divToHide'){
document.querySelector('.menu-container').classList.remove('active');
}
};
};
我幾乎從字面上復制粘貼了這個。 如果頁面上只有一項,則更喜歡 id 而不是類,如本例所示。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.