js-鼠标经过显示下拉菜单

最新推荐文章于 2022-10-12 17:27:13 发布

原创最新推荐文章于 2022-10-12 17:27:13 发布 · 2w 阅读

44 ·

CC 4.0 BY-SA版权

本文介绍使用JavaScript控制二级下拉菜单的显示与隐藏。通过onmouseover和onmouseout事件触发，控制CSS样式display属性，实现菜单的展开与收起效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网页中，下拉菜单的样式非常多，这里介绍一下如何用js代码来控制

分析：1、效果：控制样式display的显示和隐藏

2、事件：当鼠标经过时onmouseover和当鼠标移出时onmouseout

3、获取元素：DOM文档对象模型：赋予js控制结构和样式的能力。document.getElementById（）；获取元素通过 id；

如上图所示，鼠标经过一级菜单的时候，二级下拉菜单显示出来：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>二级下拉菜单</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

list-style: none;

}

#one>li{

width: 80px;

height: 40px;

margin: 2px;

background: #d8d8d8;

float: left;

text-align: center;

line-height: 40px;

}

.two{

width: 80px;

height: 160px;

background: #666;

display: none;

}

</style>

<script type="text/javascript">

window.onload=function(){

var oUl=document.getElementById('one');

var aLi=oUl.children;//获取第一级菜单的四个子标签

for (i=0;i<aLi.length;i++) {

aLi[i].onmouseover=function(){

this.children[0].style.display='block';

};

aLi[i].onmouseout=function(){

this.children[0].style.display='none';

};

}

};

</script>

</head>

<body>

<ul id="one">

<li class="one_list">一级菜单

<ul class="two">

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ul>

</li>

<li class="one_list">一级菜单

<ul class="two">

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ul>

</li>

<li class="one_list">一级菜单

<ul class="two">

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ul>

</li>

<li class="one_list">一级菜单

<ul class="two">

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

<li>二级菜单</li>

</ul>

</li>

</ul>

</body>

</html>

以上代码还可以整理一下，实现各种炫酷的下拉菜单，

1、通过控制二级下拉菜单的高度从0到它本身的height（还可以加上缓冲运动的效果和渐隐渐现的效果）；

2、通过控制二级下拉菜单的宽度从0到它本身的width（还可以加上缓冲运动的效果和渐隐渐现的效果）；

3、通过控制二级下拉菜单的位置从频幕左侧运动过来或从屏幕上方往下运动；

4、通过控制二级下拉菜单的透明度opacity的值从0到1（即渐隐渐现）

等等；

.......

.......