点击显示子菜单,离开隐藏子菜单(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";
}
}
}
}
<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";
}
}
}
}
相关文章推荐
- TBODY在firefox下用js显示和隐藏时出现错位的解决方法
- firefox TBODY 用js显示和隐藏时出现错位的解决方法
- GridView中数据源中包含html标签显示问题的解决方法
- FLex3中弹出窗口包含TabNavigator时标签页的标题可能显示不完全的问题及解决方法
- jquery教程:仿miqike.com首页"热门标签"层绝对定位 点击隐藏/点击显示JS效果
- FLex3中弹出窗口包含TabNavigator时标签页的标题可能显示不完全的问题及解决方法
- FLex3中弹出窗口包含TabNavigator时标签页的标题可能显示不完全的问题及解决方法
- JS实现点击链接切换显示隐藏内容的方法
- jq与JS点击显示隐藏二级菜单的几种方法
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- firefox TBODY 用js显示和隐藏时出现错位的解决方法
- angularJs a标签重复点击无效解决方法
- listview的某个item点击显示或隐藏的错乱问题解决方法
- table表格js简单操作隐藏与显示出现结构错乱解决方法
- Js实现当前点击a标签变色突出显示其他a标签回复原色
- 【转】iOS 上常用的两个功能:点击屏幕和return退出隐藏键盘和解决虚拟键盘挡住UITextField的方法
- jquery和js实现对div的隐藏和显示方法
- JS实现点击参数面板按钮显示或隐藏数据
- JS实现点击参数面板按钮显示或隐藏数据
- iOS 上常用的两个功能:点击屏幕和return退出隐藏键盘和解决虚拟键盘挡住UITextField的方法