Question

我有一个几年前建立的网站，它是使用嵌套表构建的，当试图将模板转换为响应式设计时，这是一个主要问题。它是一个拥有大量搜索引擎优化的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

您可以删除＆＃34; /about-mobile.html"而不是发布2个链接。并转到主页或任何其他页面以查看菜单应该如何。

Answer 1

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

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

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

并且您的新页面没有。我在/about-mobile.html的控制台上对它进行了测试，似乎有效，但我不确定你是否因为某种原因无法使用它。

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

1 个答案: