[英]Hide the menu when clicking outside it
I have some HTML menus, which I show completely when a user clicks on the head of these menus.我有一些 HTML 菜单,当用户单击这些菜单的头部时,我会完全显示这些菜单。 I would like to hide these elements when the user clicks outside the menus' area as well as clicking on myaccount section again.
当用户在菜单区域之外单击并再次单击 myaccount 部分时,我想隐藏这些元素。
Here is the code,这是代码,
<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>
Please help me to do this.请帮助我做到这一点。
You have to remember the state of the menu first, like set var open = true when its open.您必须首先记住菜单的 state,例如打开时设置 var open = true。 Then make a function that 'toggles' and bind that to the onClick event of your menu-head.
然后制作一个“切换”的 function 并将其绑定到菜单头的 onClick 事件。 Then either bind a closeMenu function on an onClick event directly to your whole document or on an onMouseOut from your menu (you can even build a delay here).
然后将 onClick 事件上的 closeMenu function 直接绑定到整个文档或菜单中的 onMouseOut(您甚至可以在此处构建延迟)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.