JavaScript下拉菜单是一种常见的网页交互元素，用于提供多级导航结构，通常用于网站的顶部导航栏。在这个实例中，我们将探讨如何使用JavaScript和CSS来创建一个简单的下拉菜单，并实现渐显效果。
HTML结构是构建下拉菜单的基础。在这个例子中，我们看到使用了`<div>`元素来组织菜单，其中`<dt>`表示菜单项，`<dd>`表示下拉内容。下拉内容默认是隐藏的，通过`display:none`属性控制。当鼠标悬停在菜单项上时，`<dd>`内容将显示出来。
```html
<div class="dropdown">
<dt id="menu-item">菜单项</dt>
<dd id="menu-item-ddcontent" style="display:none;">下拉内容</dd>
</div>
```
CSS部分用于定义菜单的样式和动画效果。`dropdown`类用于设置菜单的整体样式，`dt`和`dd`的样式分别定义菜单项和下拉内容的外观。特别地，`position:absolute`和`z-index:200`用于确保下拉内容能覆盖其他元素，而`opacity:0`则用于初始时隐藏下拉内容。
```css
.dropdown {
float: left;
padding-right: 0px;
}
.dropdown dt {
width: 80px;
border: 2px solid #9ac1c9;
padding: 8px;
font-weight: bold;
cursor: pointer;
}
.dropdown dd {
position: absolute;
overflow: hidden;
width: 100px;
display: none;
background: #fff;
z-index: 200;
opacity: 0;
}
```
JavaScript部分使用了定时器和递归调用来实现渐显效果。`ddMenu`函数是核心，它接受两个参数：菜单ID和方向（1表示展开，0表示收起）。`DDSPEED`和`DDTIMER`是常量，分别代表每次改变高度的速度和定时器的间隔时间。
```javascript
var DDSPEED = 10;
var DDTIMER = 15;
function ddMenu(id, d) {
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearInterval(c.timer);
if (d == 1) {
// 展开菜单
...
} else {
// 收起菜单
...
}
}
```
展开菜单时，首先清除定时器，然后检查下拉内容是否已完全展开。如果未展开，则将其显示出来，计算最大高度，然后通过`setInterval`逐步增加高度，实现渐显效果。收起菜单时，使用`setTimeout`来延迟执行收起操作，模拟出一个渐隐的效果。
这个实例展示了如何结合JavaScript和CSS来创建具有交互性的下拉菜单，并通过定时器和递归调用来实现平滑的动画过渡。这种技术可以适应不同的浏览器，为用户提供良好的用户体验。在实际项目中，可以根据需求进行定制，例如添加更多级的子菜单，或者调整样式以匹配网站的视觉风格。
- 1
- 2
前往页