Question

我在我的网站上使用这段代码来实现下拉菜单：

<script>
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}
}();
</script>

和

<div style="margin-left:150px">
                    <ul class="menu" id="menu">
                        <li><a href="#" class="menulink">Dropdown One</a>
                            <ul>
                                <li><a href="#">Navigation Item 1</a></li>
                                <li>
                                    <a href="#" class="sub">Navigation Item 2</a>
                                    <ul>
                                        <li class="topline"><a href="#">Navigation Item 1</a></li>
                                        <li><a href="#">Navigation Item 2</a></li>
                                        <li><a href="#">Navigation Item 3</a></li>
                                        <li><a href="#">Navigation Item 4</a></li>
                                        <li><a href="#">Navigation Item 5</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#" class="sub">Navigation Item 3</a>
                                    <ul>
                                        <li class="topline"><a href="#">Navigation Item 1</a></li>
                                        <li><a href="#">Navigation Item 2</a></li>
                                        <li>
                                            <a href="#" class="sub">Navigation Item 3</a>
                                            <ul>
                                                <li class="topline"><a href="#">Navigation Item 1</a></li>
                                                <li><a href="#">Navigation Item 2</a></li>
                                                <li><a href="#">Navigation Item 3</a></li>
                                                <li><a href="#">Navigation Item 4</a></li>
                                                <li><a href="#">Navigation Item 5</a></li>
                                                <li><a href="#">Navigation Item 6</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Navigation Item 4</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Navigation Item 4</a></li>
                                <li><a href="#">Navigation Item 5</a></li>
                            </ul>
                        </li>
                    </ul>   
                </div>

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

我试图在h.onclick中转换h.onmouseover和h.onmouseout，因为我想在用户点击菜单时展开菜单。

我该怎么做？我是Javascript中的新手。

Answer 1

试试这个：

从

改变

h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');

更改为

h.onclick=new Function(this.n+'.st('+i+',true)');

从onmouseover到onclick的Javascript

1 个答案: