单击外部时隐藏菜单

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