博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
点击显示子菜单,离开隐藏子菜单(onmouseout下包含a标签的js解决方法)
阅读量:7283 次
发布时间:2019-06-30

本文共 1077 字,大约阅读时间需要 3 分钟。

<div class="menu">
    <a href="javascript:void(0);" id="a_all" runat="server" class="all" οnclick="showMenu()" hidefocus="true">全部</a>
    <div id="divMenu" class="menu_l" style="display: none;" οnmοuseοut="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";
            }
        }
    }
}

转载于:https://www.cnblogs.com/tongjunjiang/p/3258284.html

你可能感兴趣的文章
html表格学习
查看>>
利用管道完成数据从MySQL到Redis的高效迁移
查看>>
Unity Android真机调试
查看>>
Python使用urllib、urllib2捉取网页内容
查看>>
轻量级的bug管理平台对比
查看>>
keepalived高可用部署
查看>>
linux工程师技术-01 -SElinux、配置高级连接、防火墙管理策略
查看>>
tomcat部署乱码
查看>>
网络安全小实验
查看>>
1月30日
查看>>
forClass
查看>>
每一个关注支付的人都在这里
查看>>
百晓生带你玩转linux系统服务搭建系列-----搭建DHCP服务和中继代理
查看>>
GMO Media 使用 HashiCorp Terraform Enterprise 自动配置基础
查看>>
了解java虚拟机&mdash;CMS回收器(8)
查看>>
Lambda plus: 云上大数据解决方案
查看>>
51.使用jdbc操作数据库
查看>>
厉害了!莱西一智能科技企业连获三个智慧城市优秀解决方案
查看>>
springboot mybatis 框架整合源码 集成代码生成器 shiro 权限
查看>>
网页中显示数学公式
查看>>