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

Question

我有一个几年前建立的网站，它是使用嵌套表格构建的，这在尝试将模板转换为响应式设计时变成了一个主要问题。这是一个带有大量 SEO 的 html 站点，因此客户不愿意转换为 php 并冒着丢失链接的风险。所以，我决定使用jquery的load方法将菜单加载到一个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 上的控制台中对其进行了测试，它似乎可以正常工作，但我不确定您是否出于某种原因无法使用它。