在外部點擊時隱藏菜單

Question

我有一些HTML菜單，當用戶點擊這些菜單的頭部時，我會完全顯示這些菜單。我想隱藏這些元素，當用戶點擊菜單的區域外，以及再次點擊myaccount部分。

下面是代碼，

<li onclick="san()"> 
<div id="topnav"><a id="displayText" href="#" class="signin">My Acount</a></div> 
<div id="topnav1" style="display:none;"><a id="displayText1" href="#">My Acount</a></div> 
</li> 

    <div id="signin_menu" style="display:none;"> 
      <div class="droptop"></div> 
      <div class="maindropsign"> 
         <div class="header_box">My Acount</div> 
         <div class="txt_drop"><a href="#">My Profile</a></div> 
         <div class="txt_drop"><a href="#">My Backer History</a></div> 
         <div class="txt_drop"><a href="#">Edit Settings</a></div> 
         <div class="txt_drop_log"><a href="#">Log Out</a></div> 
      </div> 
      <div class="dropbut"></div> 
    </div> 

<script language="javascript"> 
function san() 
{ 
    if(document.getElementById('signin_menu').style.display=='') 
    { 
    document.getElementById('signin_menu').style.display='none'; 
    document.getElementById('topnav1').style.display='none'; 
    document.getElementById('topnav').style.display=''; 
    } 
    else 
    { 
    document.getElementById('signin_menu').style.display=''; 
    document.getElementById('topnav1').style.display=''; 
    document.getElementById('topnav').style.display='none'; 
    } 

} 
</script> 

請幫我做到這一點。

Answer 1

您必須先記住菜單的狀態，例如打開時設置var open = true。然後創建一個「切換」並將其綁定到菜單頭的onClick事件的函數。然後，將onClick事件上的closeMenu函數直接綁定到整個文檔或菜單上的onMouseOut（甚至可以在此處構建延遲）。