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

<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