![](https://iknow-base.cdn.bcebos.com/lxb/notice.png)
js如何再添加一个下拉菜单呢?html 100
htm导航栏是<li><ahref=""</a></li><li><ahref="</a></li><li><ahref="</a><divclass="nav-list...
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里改如何修改呢? 展开
<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里改如何修改呢? 展开
展开全部
除了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>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询
广告 您可能关注的内容 |