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

有关于这个问题，已经发过一个帖子（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();
}
});

解决方案 »

  1.   

    子层里面加入onmouseout　事件，这子层Display为none。你用jQuery，自己改下吧。我这没环境。
      

  2.   

    一个很老的问题了,,还真多人会犯错误...坦白说用mouseout,mouseover,这二个事件并不好用..IE下因此有了mousein,mouseleave这二个特殊事件,其它没有这二个特殊事件的要通过 mouseout,mouseover 实现 那二个特殊事件,,
    具体源码 参看jQuery 源码的 hover 事件......
      

  3.   

    竟然你都用jQuery了,,jQuery其实包含有 mousein ,mouseleave 这二个事件的...替换掉mouseover和mouseout就行了....;
      

  4.   


    你可以在显示子层页面之前，将所有的子层隐藏掉（也就是关闭）
    然后在显示鼠标放到当前对象的子层鼠标移到计算机软件，会显示子层，当鼠标直接横向移动，移到销售管理的时候，而销售管理的子层又出来了，你要在这个层显示出来之前关闭所有的层。然后再显示当前这个层。这样就可以把原来的子层关闭或隐藏解决问题的难点：怎么判断鼠标已经移到另外的父层上，或者说，怎么判断鼠标已经离开原来的父层并且不在原来父层下的子层范围内
    你只需要给计算机软件这样的链接，添加一个onmouseout事件，离开时可以触发该事件隐藏元素也可以
      

  5.   

    问题已经解决,虽然不理想,但是比原来好像好多了,现在贴以下代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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>
    <h1>JS前段备用</h1>
        <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="tb_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:'#tab_11'});">计算机软件</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>
                                           <tr><td><input type='checkbox' id='1103' onclick='cb_Selected(this)' value='数据库工程师/管理员'/>数据库工程师/管理员</td></tr>
                                           <tr><td><input type='checkbox' id='1104' onclick='cb_Selected(this)' value='ERP技术开发(ORACLE/SAP)'/>ERP技术开发(ORACLE/SAP)</td></tr>
                                           <tr><td><input type='checkbox' id='1105' onclick='cb_Selected(this)' value='系统分析员'/>系统分析员</td></tr>
                                           <tr><td><input type='checkbox' id='1106' onclick='cb_Selected(this)' value='系统工程师'/>系统工程师</td></tr>
                                           <tr><td><input type='checkbox' id='1107' onclick='cb_Selected(this)' value='系统集成工程师'/>系统集成工程师</td></tr>
                                           <tr><td><input type='checkbox' id='1108' onclick='cb_Selected(this)' value='计算机辅助设计工程师'/>计算机辅助设计工程师</td></tr>
                                           <tr><td><input type='checkbox' id='1109' onclick='cb_Selected(this)' value='其他'/>其他</td></tr>
                                           <tr><td><input type='checkbox' id='1110' onclick='cb_Selected(this)' value='系统架构设计师'/>系统架构设计师</td></tr>
                                           <tr><td><input type='checkbox' id='1111' onclick='cb_Selected(this)' value='软件UI设计师/工程师'/>软件UI设计师/工程师</td></tr>
                                           <tr><td><input type='checkbox' id='1113' onclick='cb_Selected(this)' value='ERP实施顾问(ORACLE/SAP)'/>ERP实施顾问(ORACLE/SAP)</td></tr>
                                           <tr><td><input type='checkbox' id='1114' onclick='cb_Selected(this)' value='需求工程师'/>需求工程师</td></tr>
                                           <tr><td><input type='checkbox' id='1115' 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:'#tab_12'});">销售管理</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>
                                            <tr><td><input type='checkbox' id='1204' onclick='cb_Selected(this)' value='渠道/分销经理'/>渠道/分销经理</td></tr>
                                            <tr><td><input type='checkbox' id='1205' onclick='cb_Selected(this)' value='客户经理/主管'/>客户经理/主管</td></tr>
                                            <tr><td><input type='checkbox' id='1206' onclick='cb_Selected(this)' value='渠道/分销主管'/>渠道/分销主管</td></tr>
                                            <tr><td><input type='checkbox' id='1207' onclick='cb_Selected(this)' value='区域销售经理'/>区域销售经理</td></tr>
                                            <tr><td><input type='checkbox' id='1208' onclick='cb_Selected(this)' value='区域销售总监'/>区域销售总监</td></tr>
                                            <tr><td><input type='checkbox' id='1209' onclick='cb_Selected(this)' value='商务专员/商务助理'/>商务专员/商务助理</td></tr>
                                            <tr><td><input type='checkbox' id='1210' onclick='cb_Selected(this)' value='医药代表'/>医药代表</td></tr>
                                            <tr><td><input type='checkbox' id='1211' onclick='cb_Selected(this)' value='其他'/>其他</td></tr>
                                            <tr><td><input type='checkbox' id='1212' onclick='cb_Selected(this)' value='业务拓展主管/经理'/>业务拓展主管/经理</td></tr>
                                            <tr><td><input type='checkbox' id='1213' onclick='cb_Selected(this)' value='业务主管'/>业务主管</td></tr>
                                            <tr><td><input type='checkbox' id='1214' onclick='cb_Selected(this)' value='业务经理'/>业务经理</td></tr>
                                        </table>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </body>
    </html>
      

  6.   


    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,                            //触发的元素或id,必填参数
    popupBlk:null,                           //弹出内容层元素或id,必填参数
    closeBtn:null,                           //关闭弹出层的元素或id
    closeLayout:null,
    popupLayerClass:"popupLayer",            //弹出层容器的class名称
    eventType:"click",                       //触发事件的类型
    offsets:{                                //弹出层容器位置的调整值
    x:0,
    y:0
    },
    useFx:false,                             //是否使用特效
    useOverlay:false,                        //是否使用全局遮罩
    usePopupIframe:true,                     //是否使用容器遮罩
    isresize:true,                           //是否绑定window对象的resize事件
    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.options.popupLayerClass).hide();
    //alert($('.'+this.options.popupLayerClass).length);
    if($('.'+this.options.popupLayerClass).length > 1) {    //在每次弹出层之前,把所有的子层先隐藏,但是这样有个问题,隐藏不是释放,始终占着位置,浪费内存,还有个问题就是在移到下个父类之前子层始终存在,看着不舒服,这个就等待高手来解决,谢谢大家,更谢谢stayalive所给的思路
    $('.'+this.options.popupLayerClass+':gt(0)').hide();
    }
    //$(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();
    }
    });
      

  7.   

    可能是第一次的时候有些dom还没有创建
      

  8.   

     如果用jq就直接使用mouseover与mouseout就可以做到了，如果自己动手写，就需要判断当前鼠标的位置是否需要关闭这个层。JQ内部已经帮你实现了，在指定DOM内移动并不会触发其mouseout的事件（自己动手写的会，JQ内部做了处理）
      

  9.   

    onmouseout onmousehover
    你给第一个元素绑定了 onmousehover 怎么 不绑定 onmouseout 事件呢？
    代码我没看，太长了