js如何再添加一个下拉菜单呢？html

htm导航栏是<li><a href="" </a></li> <li><a href="</a></li> <li> <a href="</a> <div class="nav-list" id="dataTd" style="display: none;"> <a href=“">人物角色</a> <a href="">游戏视频</a> </div> </li>js是<script type="text/javascript"> var oDiv1=document.getElementById(✀dataTh✀); var oDiv2=document.getElementById(✀dataTd✀); var timer=null;oDiv2.onmouseover=oDiv1.onmouseover=function () { clearTimeout(timer); oDiv2.style.display=✀block✀; oDiv1.className=✀data-list✀; }; oDiv2.onmouseout=oDiv1.onmouseout=function () { timer=setTimeout(function (){ oDiv2.style.display=✀none✀; oDiv1.className=✀✀; }, 100); };</script>这个是导航栏下拉，但是始终只能做一个导航栏下拉，我想做多个，js里改如何修改呢？

2026年09月26日 21:37

有1个网友回答

网友（1）：

除了html代码没有关闭你的逻辑有点乱

htm导航栏是





      
   
       人物角色
       游戏视频

html文件中有id为dataTd但是没有dataTh

js是


    var oDiv1=document.getElementById('dataTh');
    //获取ID 为dataTh的html元素
    var oDiv2=document.getElementById('dataTd');
    //获取ID 为dataTd的html元素
     var timer=null;
//onmouseover代表鼠标划入指定范围  触发事件
      oDiv2.onmouseover=oDiv1.onmouseover=function ()
    {
        clearTimeout(timer);
        oDiv2.style.display='block';
        oDiv1.className='data-list';
这几句代码的意思是  当鼠标指向id为dataTh或者id为dataTd的元素，触发id为dataTd的元素显示，id为dataTh的元素添加类名为“data-list”的class类
    };
//onmouseout代表鼠标离开指定范围  触发事件
    oDiv2.onmouseout=oDiv1.onmouseout=function ()
    {
        timer=setTimeout(function (){
            oDiv2.style.display='none';id为dataTd的元素隐藏
            oDiv1.className='';id为dataTh的元素去掉类名为“data-list”的class类
        }, 100);
每0.1秒执行一次
    };

我给你举个例子

要实现的功能是当鼠标划过列表中的id="dataTh"的元素时，隐藏的子菜单显示

html页面


      

    
       人物角色
       游戏视频


    var oDiv1=document.getElementById('dataTh');
    //获取ID 为dataTh的html元素
    var oDiv2=document.getElementById('dataTd');
    //获取ID 为dataTd的html元素
     var timer=null;
//onmouseover代表鼠标划入指定范围  触发事件
    oDiv1.onmouseover=function ()
    {
        clearTimeout(timer);
        oDiv2.style.display='block';
        oDiv1.className='data-list';
//这几句代码的意思是  当鼠标指向id为dataTh的元素，触发id为dataTd的元素显示，id为dataTh的元素添加类名为“data-list”的class类
    };
//onmouseout代表鼠标离开指定范围  触发事件
    oDiv1.onmouseout=function ()
    {
        oDiv2.style.display='none';//id为dataTd的元素隐藏
        oDiv1.className='';//id为dataTh的元素去掉类名为“data-list”的class类
    };