Javascript菜单悬停事件不适用于加载了JQuery的html

Question

我有一个建于几年前的网站，它是使用嵌套表构建的，当试图将模板转换为响应式设计时，这已成为一个主要问题。 这是一个带有大量SEO的html站点，因此客户端不愿意转换为php并冒失去链接的风险。 因此，我决定使用jquery加载方法将菜单加载到div中，因此，如果我需要添加页面或更改当前菜单，则只需更改1页即可。

因此，菜单使用了较旧的javascript代码来隐藏下拉菜单：

var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
    a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
    for(i;i<l;i++){
        var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
        h.onmouseover=new Function(this.n+'.st('+i+',true)');
        h.onmouseout=new Function(this.n+'.st('+i+')');
    }
}
dd.prototype.st=function(x,f){
    var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
    clearInterval(c.t); c.style.overflow='hidden';
    if(f){
        p.className+=' '+a;
        if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
        if(c.mh==c.offsetHeight){c.style.overflow='visible'}
        else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
    }else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
    var h=c.offsetHeight;
    if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
        if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
        clearInterval(c.t); return
    }
    var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
    c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
    c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();

我真的不认为这会导致问题，因为CSS可以正常工作，并且我看不到任何错误，这就是我包含该html页面的方式。

<script> 
$(function(){
  $("#menud").load("menu.html"); 
});
</script>
<script type="text/javascript" src="script.js"></script> 

但是，下拉列表没有悬停显示，我在检查器中查看了该页面，并在原始页面的ul上看到了很多属性，但是当在新页面上检查ul时，它没有属性，并且当我将鼠标悬停在链接上。 这是测试页面的链接： http : //pezzelectric.com/about-mobile.html

不用我发布2个链接，您只需删除“ /about-mobile.html”并转到主页或任何其他页面，以查看菜单的外观。

Answer 1

如果我正确理解，我认为您可能在新页面（/about-mobile.html）中缺少初始化脚本。

主页在页面底部附近具有以下内容：

<script type=text/javascript>
    var menu=new menu.dd("menu");
    menu.init("menu","menuhover");
</script>

而您的新页面没有。 我在/about-mobile.html控制台中/about-mobile.html进行了测试，它似乎可以正常工作，但是我不确定您是否由于某些原因而无法使用它。