Question

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里改如何修改呢？

Answer 1

除了html代码<a></a>没有关闭  你的逻辑有点乱

htm导航栏是

<li><a href="" ></a></li><!--a标签要关闭 -->
<li><a href="></a></li><!--a标签要关闭 -->
<li>
    <a href="></a>  <!--a标签要关闭 -->
   <div class="nav-list" id="dataTd" style="display: none;">
       <a href=“">人物角色</a>
       <a href="">游戏视频</a>
   </div>  
</li>

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

js是

<script type="text/javascript">
    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秒执行一次
    };
</script>

我给你举个例子

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

html页面

<li>
    <a href=" id="dataTh"></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');
    //获取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类
    };
</script>