您的位置:首页 > Web前端 > JavaScript

点击显示子菜单,离开隐藏子菜单(onmouseout下包含a标签的js解决方法)

2013-08-14 19:36 513 查看
<div class="menu">
<a href="javascript:void(0);" id="a_all" runat="server" class="all" onclick="showMenu()" hidefocus="true">全部</a>
<div id="divMenu" class="menu_l" style="display: none;" onmouseout="hideMenu(this,event)">
<asp:LinkButton ID="lbtnDeptAll" runat="server" Text="全部" CssClass="zero"></asp:LinkButton>
<asp:LinkButton ID="lbtnDeptOne" runat="server" Text="一区" CssClass="one"></asp:LinkButton>
<asp:LinkButton ID="lbtnDeptTwo" runat="server" Text="二区" CssClass="two"></asp:LinkButton>
</div>
</div>

/*注意其中的div都要指定高度,否则也会造成鼠标进入a标签后就隐藏了*/

/*js解决的难点:当前子菜单包含a标签,一定进入该a标签后,就被隐藏了,即触发了hideMenu()方法,以下js就是解决了这个难题*/
function showMenu() {
document.getElementById("divMenu").style.display = "";
}
function hideMenu(obj, e) {
if (e.currentTarget) {
if (e.relatedTarget != obj) {
if (obj != e.relatedTarget.parentNode) {
document.getElementById("divMenu").style.display = "none";
}
}
} else {
if (e.toElement != obj) {
if (obj != e.toElement.parentNode) {
document.getElementById("divMenu").style.display = "none";
}
}
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐