鼠标移动到新的菜单上，无法关闭原来的子菜单

aaajedll 2010-07-15 09:09:06
有关于这个问题，已经发过一个帖子（http://topic.csdn.net/u/20100712/14/2809bfa0-812b-4443-98a9-490b7a428d97.html），但是由于本人能力不足，未能修改完善，所以再发一贴，请大家帮忙解决问题

问题描述：鼠标移到计算机软件，会显示子层，但是鼠标直接横向移动，当移到销售管理的时候，计算机软件的子层没有关闭，而销售管理的子层又出来了，我想要实现的功能，鼠标离开子层或者移到另外的父层上，显示新子层的时候，把原来的子层关闭或隐藏

解决问题的难点：怎么判断鼠标已经移到另外的父层上，或者说，怎么判断鼠标已经离开原来的父层并且不在原来父层下的子层范围内

问题图片如下：


html页面代码如下：


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=7" />

    <title>test</title>

    <link href="styles/core.css" type="text/css" rel="stylesheet"/>

    <script src="scripts/jquery.1.3.2.js" type="text/javascript" language="javascript"></script>

    <script src="scripts/popup_layer.js" type="text/javascript" language="javascript"></script>

        <script language="javascript" type="text/javascript">

        $(document).ready(function() {

            new PopupLayer({trigger:"#btn_Functions",popupBlk:"#div_Functions",closeBtn:"#cle_Functions",useOverlay:true});

        });

    </script>



</head>

<body>

    <div id="div_BasFunctions" class="example">

        <input id="btn_Functions" type="button" value="选择/修改" class="search-list-off" onmouseover="this.className='search-list-off-hover';" onmouseout="this.className='search-list-off';"/>

        <div id="div_Functions" class="blk" style="display:none;width:800px;">

            <div class="main">

                <table style="width:99%;padding:5;" id="tab_Functions">

                    <tr>

                        <td style="width:20%;">已选职能:</td>

                        <td style="width:60%;" colspan="3"><span id="sp_FunctionsContent" style="font-weight:bold; font-size:14px;"></span></td>

                        <td style="width:20%;" align="right"><a href="javascript:void(0)" id="cle_Functions">［确定］</a></td>

                    </tr>

                    <tr>

                        <td><span id='sp_Test11' onMouseover="new PopupLayer({trigger:'#sp_Test11',popupBlk:'#div_Sub11',eventType:'mouseover',closeLayout:'#div_Sub11,onBeforeShow:beforeShow'});">计算机软件</span>

                            <div id='div_Sub11' class='blk' style='display:none; width:160px;' >

                                <div class='main'>

                                   <table style='width:99%;' id='tab_11'>

                                       <tr><td><input type='checkbox' id='11' onclick='cb_Selected(this)' value='计算机软件'/>计算机软件</td></tr>

                                       <tr><td><input type='checkbox' id='1101' onclick='cb_Selected(this)' value='高级软件工程师'/>高级软件工程师</td></tr>

                                       <tr><td><input type='checkbox' id='1102' onclick='cb_Selected(this)' value='软件工程师'/>软件工程师</td></tr>

                                    </table>

                                </div>

                            </div>

                        </td>

                        <td><span id='sp_Test12' onMouseover="new PopupLayer({trigger:'#sp_Test12',popupBlk:'#div_Sub12',eventType:'mouseover',closeLayout:'#div_Sub12,onBeforeShow:beforeShow'});">销售管理</span>

                            <div id='div_Sub12' class='blk' style='display:none; width:160px;' >

                                <div class='main'>

                                    <table style='width:99%;' id='tab_12'>

                                        <tr><td><input type='checkbox' id='12' onclick='cb_Selected(this)' value='销售管理'/>销售管理</td></tr>

                                        <tr><td><input type='checkbox' id='1201' onclick='cb_Selected(this)' value='销售总监'/>销售总监</td></tr>

                                        <tr><td><input type='checkbox' id='1202' onclick='cb_Selected(this)' value='销售经理'/>销售经理</td></tr>

                                        <tr><td><input type='checkbox' id='1203' onclick='cb_Selected(this)' value='销售主管'/>销售主管</td></tr>

                                    </table>

                                </div>

                            </div>

                        </td>

                    </tr>

                </table>

            </div>

        </div>

    </div>

</body>

</html>


popup_layer.js代码如下：


Function.prototype.binding = function() {

    if (arguments.length < 2 && typeof arguments[0] == "undefined") return this;

    var __method = this, args = jQuery.makeArray(arguments), object = args.shift();

    return function() {

        return __method.apply(object, args.concat(jQuery.makeArray(arguments)));

    }

}



var Class = function(subclass){

	subclass.setOptions = function(options){

		this.options = jQuery.extend({}, this.options,options);

		for(var key in options){

			if(/^on[A-Z][A-Za-z]*$/.test(key)){

				$(this).bind(key,options[key]);

			}

		}

	}

    var fn =  function(){

        if(subclass._init && typeof subclass._init == 'function'){

            this._init.apply(this,arguments);

        }

    }

    if(typeof subclass == 'object'){

        fn.prototype = subclass;

    }

    return fn;

}

var PopupLayer = new Class({

	options:{

		trigger:null,                            

		popupBlk:null,                           

		closeBtn:null,                           

		closeLayout:null,

		popupLayerClass:"popupLayer",            

		eventType:"click",                       

		offsets:{                                

			x:0,

			y:0

		},

		useFx:false,                             

		useOverlay:false,                        

		usePopupIframe:true,                     

		isresize:true,                           

		onBeforeShow:function(){},

		onBeforeStart:function(){}            

	},

	_init:function(options){

		this.setOptions(options);                

		this.isSetPosition = this.isDoPopup = this.isOverlay = true;    

		this.popupLayer = $(document.createElement("div")).addClass(this.options.popupLayerClass);     //初始化最外层容器

		this.popupIframe = $(document.createElement("iframe")).attr({border:0,frameborder:0});         //容器遮罩,用于屏蔽ie6下的select

		this.trigger = $(this.options.trigger);                         //把触发元素封装成实例的一个属性，方便使用及理解

		this.popupBlk = $(this.options.popupBlk);                       //把弹出内容层元素封装成实例的一个属性

		this.closeBtn = $(this.options.closeBtn);                       //把关闭按钮素封装成实例的一个属性

		this.closeLayout=$(this.options.closeLayout);                    

		$(this).trigger("onBeforeStart");                               //执行自定义事件。

		this._construct()                                               //通过弹出内容层，构造弹出层，即为其添加外层容器及底层iframe

		this.trigger.bind(this.options.eventType,function(){            //给触发元素绑定触发事件

            		$(this).trigger("onBeforeShow");                        //取代隐藏所有层的代码，更改为自定义事件，在自定义事件中处理

			if(this.isSetPosition){

				this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);

			}

			this.options.useOverlay?this._loadOverlay():null;               //如果使用遮罩则加载遮罩元素

			(this.isOverlay && this.options.useOverlay)?this.overlay.show():null;

			if(this.isDoPopup && (this.popupLayer.css("display")== "none")){

				this.options.useFx?this.doEffects("open"):this.popupLayer.show();

			}							 

		}.binding(this));

		this.isresize?$(window).bind("resize",this.doresize.binding(this)):null;

		this.options.closeBtn?this.closeBtn.bind("click",this.close.binding(this)):null;   //如果有关闭按钮，则给关闭按钮绑定关闭事件

		this.options.closeLayout?this.closeLayout.bind("mouseleave",this.close.binding(this)):null;

	},

	_construct:function(){                  //构造弹出层

		this.popupBlk.show();

		this.popupLayer.append(this.popupBlk.css({opacity:1})).appendTo($(document.body)).css({position:"absolute",'z-index':2,width:this.popupBlk.get(0).offsetWidth,height:this.popupBlk.get(0).offsetHeight});

		this.options.usePopupIframe?this.popupLayer.append(this.popupIframe):null;

		this.recalculatePopupIframe();

		this.popupLayer.hide();

	},

	_loadOverlay:function(){                //加载遮罩

		pageWidth = ($.browser.version=="6.0")?$(document).width()-21:$(document).width();

		this.overlay?this.overlay.remove():null;

		this.overlay = $(document.createElement("div"));

		this.overlay.css({position:"absolute","z-index":1,left:0,top:0,zoom:1,display:"none",width:pageWidth,height:$(document).height()}).appendTo($(document.body)).append("<div style='position:absolute;z-index:2;width:100%;height:100%;left:0;top:0;opacity:0.3;filter:Alpha(opacity=30);background:#000'></div><iframe frameborder='0' border='0' style='width:100%;height:100%;position:absolute;z-index:1;left:0;top:0;filter:Alpha(opacity=0);'></iframe>")

	},

	doresize:function(){

		this.overlay?this.overlay.css({width:($.browser.version=="6.0")?$(document).width()-21:$(document).width(),height:($.browser.version=="6.0")?$(document).height()-4:$(document).height()}):null;

		if(this.isSetPosition){

			this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);

		}

	},

	setPosition:function(left,top){          //通过传入的参数值改变弹出层的位置

		this.popupLayer.css({left:left,top:top});

	},

	doEffects:function(way){                //做特效

		way == "open"?this.popupLayer.show("slow"):this.popupLayer.hide("slow");

		

	},

	recalculatePopupIframe:function(){     //重绘popupIframe,这个不知怎么改进，只好先用这个笨办法。

		this.popupIframe.css({position:"absolute",'z-index':-1,left:0,top:0,opacity:0,width:this.popupBlk.get(0).offsetWidth,height:this.popupBlk.get(0).offsetHeight});

	},

	close:function(){                      //关闭方法

		this.options.useOverlay?this.overlay.hide():null;

		this.options.useFx?this.doEffects("close"):this.popupLayer.hide();

	}

});
...全文
357 24 打赏 收藏 转发到动态 举报
写回复
用AI写文章
24 条回复
切换为时间正序
请发表友善的回复…
发表回复
xinmiyyg 2010-08-07
  • 打赏
  • 举报
 回复
新手路过来看看
aaajedll 2010-07-27
  • 打赏
  • 举报
 回复
我的JS水平太差了，实在是没招
aaajedll 2010-07-26
  • 打赏
  • 举报
 回复
还真是麻烦
jianshao810 2010-07-23
  • 打赏
  • 举报
 回复
onmouseout onmousehover
你给第一个元素绑定了 onmousehover 怎么 不绑定 onmouseout 事件呢？
代码我没看，太长了。。。
aaajedll 2010-07-23
  • 打赏
  • 举报
 回复
还是不行,第一次还是出不来,在FF下面怎么调式
aaajedll 2010-07-22
  • 打赏
  • 举报
 回复
还是不行,第一次还是出不来,在FF下面怎么调式
aaajedll 2010-07-21
  • 打赏
  • 举报
 回复
[Quote=引用 17 楼 meteoric_cry 的回复:]
如果用jq就直接使用mouseover与mouseout就可以做到了，如果自己动手写，就需要判断当前鼠标的位置是否需要关闭这个层。

JQ内部已经帮你实现了，在指定DOM内移动并不会触发其mouseout的事件（自己动手写的会，JQ内部做了处理）
[/Quote]
我试试看
Meteoric_cry 2010-07-20
  • 打赏
  • 举报
 回复
如果用jq就直接使用mouseover与mouseout就可以做到了，如果自己动手写，就需要判断当前鼠标的位置是否需要关闭这个层。

JQ内部已经帮你实现了，在指定DOM内移动并不会触发其mouseout的事件（自己动手写的会，JQ内部做了处理）
aaajedll 2010-07-20
  • 打赏
  • 举报
 回复
[Quote=引用 15 楼 ibm_hoojo 的回复:]
可能是第一次的时候有些dom还没有创建
[/Quote]
好的，我去看看，谢谢
hoojo 2010-07-19
  • 打赏
  • 举报
 回复
可能是第一次的时候有些dom还没有创建
aaajedll 2010-07-19
  • 打赏
  • 举报
 回复
以上代码为什么在FF下面,第一次无法弹出子层,一定要第二次才会显示,请问是何原因?
aaajedll 2010-07-17
  • 打赏
  • 举报
 回复
js还真不好搞,有点晕
tang_32089692 2010-07-16
  • 打赏
  • 举报
 回复
又有学习了。 。。。
aaajedll 2010-07-16
  • 打赏
  • 举报
 回复
以上代码为什么在FF下面,第一次无法弹出子层,一定要第二次才会显示,请问是何原因?
plzzz 2010-07-15
  • 打赏
  • 举报
 回复
竟然你都用jQuery了,,jQuery其实包含有 mousein ,mouseleave 这二个事件的...替换掉mouseover和mouseout就行了....;
plzzz 2010-07-15
  • 打赏
  • 举报
 回复
一个很老的问题了,,还真多人会犯错误...坦白说用mouseout,mouseover,这二个事件并不好用..IE下因此有了mousein,mouseleave这二个特殊事件,其它没有这二个特殊事件的要通过 mouseout,mouseover 实现 那二个特殊事件,,
具体源码 参看jQuery 源码的 hover 事件......
aaajedll 2010-07-15
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 xk1126 的回复:]

你这太多了！
我没法给你改，我写个简单的吧！~~~~~
[/Quote]
其实很简单,你把代码保存一下就可以运行了
xk1126 2010-07-15
  • 打赏
  • 举报
 回复
你这太多了！
我没法给你改，我写个简单的吧！~~~~~
aaajedll 2010-07-15
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 luojihaidao 的回复:]

子层里面加入onmouseout　事件，这子层Display为none。你用jQuery，自己改下吧。我这没环境。
[/Quote]
你可能没有理解意思,现在鼠标移到子层再离开,子层会关闭,我所说的问题不是这个,而是鼠标未经过子层,直接移到另外的父层上,原来的子层没有被关闭,但还是谢谢你
luojihaidao 2010-07-15
  • 打赏
  • 举报
 回复
子层里面加入onmouseout　事件，这子层Display为none。你用jQuery，自己改下吧。我这没环境。
加载更多回复（4）
MAPGIS助手V1.2 & V1.3，鼠标滚轮缩放、中键平移
再利用键盘钩子，映射键盘到鼠标上。 再通过其它算法（可以不用，只不过会很憋拗）达到更好的效果！ 并没有对MAPGIS本身做任何改动！所以不会影响MAPGIS的稳定性！ 使用过程中关闭本程序也不会有任何问题！ （关闭...
Delphi开发技巧之－Forms
添加菜单项到系统菜单 渐变色填充窗体 特效窗口 移动指针到当前具有焦点的控件 移除系统菜单项 自动关闭TCommonDialog 运行时改变MainForm 运行时移动控件 运行时移动窗口控件 选中或取消其它窗口的复选框 通过在...
老孙的游戏课 第7篇 从键盘鼠标交互到手机交互
本课程讲解用Unity实现游戏中常用的交互方法，包括键盘交互、鼠标交互，以及手机上的触摸交互和虚拟摇杆交互等，并且介绍了Unity发布Android应用所需配置。
VC++.NET开发环境整合技巧
我建议将所有不需要的子窗口都关掉，再将dock到底部和左边的所有子窗体也关掉，需要的子窗体全部放到右边，然后把图钉拔起来，要看的时候把鼠标移过去就可以看到了，滑动出来的时候不会挡住代码，给代码编辑留下最大...
Visual C++编程技巧精选集 光盘
79.如何使窗体中的控件跟随鼠标移动而移动 80.如何设置静态文本控件的背景和文本颜色 81.如何通过控件实现鼠标拖动文本效果 第3章 标题栏和菜单栏 82.如何获取程序窗口标题栏的高度 83.如何获取程序窗口标题栏的...
JavaScript

87,909

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章