利用JavaScript实现简单的下拉菜单
最近几日，突然对Javascript非常兴趣，就想用Javascript实现几个经常都实现的特效，虽然对于javascript一直能够做一些开发，但还是使用很少。
首先我想实现的就是一个下拉样式的树，在实现之前，我就想到结构一定要很简单，我想将菜单的结构做成一个最简单的结构样式，经过约5个小时的奋斗，终于完成初步的实现，先将代码贴下：
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop menu</title>
<style type="text/css">
body
{
font-size: 12px;
}
.dropMenu
{
background-color: Red;
height: 27px;
}
.dropMenu ul
{
padding: 0px;
margin: 0px;
}
.dropMenu a
{
border:solid 1px #00ff00;
display: block;
}
.dropMenu ul li
{
list-style-type: none;
border: solid 1px #00ff00;
float: left;
padding: 5px;
cursor:hand;
}
.dropMenu ul ul
{
background-color:red;
width: 140px;
display: none;
z-index: 10;
}
.dropMenu ul ul li
{
float: none;
}
</style>
<script language="javascript" type="text/javascript">
function openDropMenu(sender) {
var nextNode = sender.nextSibling;
var dropMenu = sender.parentNode;
// 隐藏所有的下拉列表；
for (var i = 0; i < dropMenu.childNodes.length; i++) {
if (dropMenu.childNodes[i].nodeName.toLowerCase() == 'ul' &&
dropMenu.childNodes[i].style.display == 'block') {
closeDropMenu(dropMenu.childNodes[i]);
}
}
if (nextNode.nodeName.toLowerCase() == "ul") {
nextNode.style.left = sender.offsetLeft;
nextNode.style.top = sender.offsetTop + sender.offsetHeight;
nextNode.style.position = "absolute";
nextNode.style.display = 'block';
}
document.onclick = function() {
document.onclick = '';
//alert(sender.innerText);
closeDropMenu(nextNode);
};
}
function openDropSubMenu(sender) {
var nextNode = sender.nextSibling;
var ulNode = sender.parentNode;
for (var i = 0; i < ulNode.childNodes.length; i++) {
if (ulNode.childNodes[i].nodeName.toLowerCase() == 'ul') {
closeDropMenu(ulNode.childNodes[i]);
}
}
if (nextNode != null && nextNode.nodeName.toLowerCase() == "ul") {
// nextNode.style.border = "solid 1px #0000ff";
nextNode.style.position = "absolute";
nextNode.style.left = sender.offsetLeft + sender.offsetWidth;
nextNode.style.top = sender.offsetTop;
nextNode.style.display = "block";
}
}
// 关闭下接菜单
function closeDropMenu(subMenu) {
if (subMenu == null || subMenu.style.display == 'none') return;
// 关闭子菜单
for (var i = 0; i < subMenu.childNodes.length; i++) {
if (subMenu.childNodes[i].nodeName.toLowerCase() == 'ul') {
closeDropMenu(subMenu.childNodes[i]);
}
}
// 关闭当前菜单。
subMenu.style.display = 'none';
}
</script>
</head>
<body>
<h1>Drop Menu Example</h1>
<div class="dropMenu">
<ul>
<li>Normal</li>
<li onmouseover="openDropMenu(this);">关于公司</li>
<ul>
<li>Normal Sub MenuA</li>
<li onmouseover="openDropSubMenu(this);"><a href="http://www.g.cn" >Google</a></li>
<ul>
<li onmouseover="openDropSubMenu(this);">二级子菜单AA</li>
<li onmouseover="openDropSubMenu(this);">二级子菜单AB</li>
<ul>
<li onmouseover="openDropSubMenu(this);">三级子菜单BA</li>
<li onmouseover="openDropSubMenu(this);">三级子菜单BB</li>
<li onmouseover="openDropSubMenu(this);">三级子菜单BC</li>
<ul>
<li><a href='http://www.baidu.com'>白度</a></li>
<li>四级菜单</li>
<li>四级菜单</li>
</ul>
</ul>
</ul>
<li onmouseover="openDropSubMenu(this);">关于一级子菜单B</li>
<ul>
<li>二级子菜单BA</li>
<li>二级子菜单BB</li>
<li>二级子菜单BC</li>
</ul>
<li onmouseover="openDropSubMenu(this);">关于一级子菜单C</li>
<ul>
<li>二级子菜单CA</li>
<li>二级子菜单CB</li>
<li>二级子菜单CC</li>
<li>二级子菜单CD</li>
</ul>
<li onmouseover="openDropSubMenu(this);">关于一级子菜单D</li>
<ul>
<li>二级子菜单DA</li>
<li>二级子菜单DB</li>
<li>二级子菜单DC</li>
<li>二级子菜单DD</li>
<li>二级子菜单DE</li>
</ul>
<li onmouseover="openDropSubMenu(this);">关于一级子菜单E</li>
<ul>
<li>二级子菜单EA</li>
<li>二级子菜单EB</li>
<li>二级子菜单EC</li>
<li>二级子菜单ED</li>
</ul>
</ul>
<li onmouseover="openDropMenu(this);">解决方案</li>
<ul>
<li>解决方案一级子菜单A</li>
<ul>
<li>二级子菜单AA</li>
<li>二级子菜单AB</li>
</ul>
<li>解决方案一级子菜单B</li>
<ul>
<li>二级子菜单BA</li>
<li>二级子菜单BB</li>
<li>二级子菜单BC</li>
</ul>
<li>解决方案一级子菜单C</li>
<ul>
<li>二级子菜单CA</li>
<li>二级子菜单CB</li>
<li>二级子菜单CC</li>
<li>二级子菜单CD</li>
</ul>
<li>解决方案一级子菜单D</li>
<ul>
<li>二级子菜单DA</li>
<li>二级子菜单DB</li>
<li>二级子菜单DC</li>
<li>二级子菜单DD</li>
<li>二级子菜单DE</li>
</ul>
<li>解决方案一级子菜单E</li>
<ul>
<li>二级子菜单EA</li>
<li>二级子菜单EB</li>
<li>二级子菜单EC</li>
<li>二级子菜单ED</li>
</ul>
</ul>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop menu</title>
<style type="text/css">
body
{
font-size: 12px;
}
.dropMenu
{
background-color: Red;
height: 27px;
}
.dropMenu ul
{
padding: 0px;
margin: 0px;
}
.dropMenu a
{
border:solid 1px #00ff00;
display: block;
}
.dropMenu ul li
{
list-style-type: none;
border: solid 1px #00ff00;
float: left;
padding: 5px;
cursor:hand;
}
.dropMenu ul ul
{
background-color:red;
width: 140px;
display: none;
z-index: 10;
}
.dropMenu ul ul li
{
float: none;
}
</style>
<script language="javascript" type="text/javascript">
function openDropMenu(sender) {
var nextNode = sender.nextSibling;
var dropMenu = sender.parentNode;
// 隐藏所有的下拉列表；
for (var i = 0; i < dropMenu.childNodes.length; i++) {
if (dropMenu.childNodes[i].nodeName.toLowerCase() == 'ul' &&
dropMenu.childNodes[i].style.display == 'block') {
closeDropMenu(dropMenu.childNodes[i]);
}
}
if (nextNode.nodeName.toLowerCase() == "ul") {
nextNode.style.left = sender.offsetLeft;
nextNode.style.top = sender.offsetTop + sender.offsetHeight;
nextNode.style.position = "absolute";
nextNode.style.display = 'block';
}
document.onclick = function() {
document.onclick = '';
//alert(sender.innerText);
closeDropMenu(nextNode);
};
}
function openDropSubMenu(sender) {
var nextNode = sender.nextSibling;
var ulNode = sender.parentNode;
for (var i = 0; i < ulNode.childNodes.length; i++) {
if (ulNode.childNodes[i].nodeName.toLowerCase() == 'ul') {
closeDropMenu(ulNode.childNodes[i]);
}
}
if (nextNode != null && nextNode.nodeName.toLowerCase() == "ul") {
// nextNode.style.border = "solid 1px #0000ff";
nextNode.style.position = "absolute";
nextNode.style.left = sender.offsetLeft + sender.offsetWidth;
nextNode.style.top = sender.offsetTop;
nextNode.style.display = "block";
}
}
// 关闭下接菜单
function closeDropMenu(subMenu) {
if (subMenu == null || subMenu.style.display == 'none') return;
// 关闭子菜单
for (var i = 0; i < subMenu.childNodes.length; i++) {
if (subMenu.childNodes[i].nodeName.toLowerCase() == 'ul') {
closeDropMenu(subMenu.childNodes[i]);
}
}
// 关闭当前菜单。
subMenu.style.display = 'none';
}
</script>
</head>
<body>
<h1>Drop Menu Example</h1>
<div class="dropMenu">
<ul>
<li>Normal</li>
<li onmouseover="openDropMenu(this);">关于公司</li>
<ul>
<li>Normal Sub MenuA</li>
<li onmouseover="openDropSubMenu(this);"><a href="http://www.g.cn" >Google</a></li>
<ul>
<li onmouseover="openDropSubMenu(this);">二级子菜单AA</li>
<li onmouseover="openDropSubMenu(this);">二级子菜单AB</li>
<ul>
<li onmouseover="openDropSubMenu(this);">三级子菜单BA</li>
<li onmouseover="openDropSubMenu(this);">三级子菜单BB</li>
<li onmouseover="openDropSubMenu(this);">三级子菜单BC</li>
<ul>
<li><a href='http://www.baidu.com'>白度</a></li>
<li>四级菜单</li>
<li>四级菜单</li>
</ul>
</ul>
</ul>
<li onmouseover="openDropSubMenu(this);">关于一级子菜单B</li>
<ul>
<li>二级子菜单BA</li>
<li>二级子菜单BB</li>
<li>二级子菜单BC</li>
</ul>
<li onmouseover="openDropSubMenu(this);">关于一级子菜单C</li>
<ul>
<li>二级子菜单CA</li>
<li>二级子菜单CB</li>
<li>二级子菜单CC</li>
<li>二级子菜单CD</li>
</ul>
<li onmouseover="openDropSubMenu(this);">关于一级子菜单D</li>
<ul>
<li>二级子菜单DA</li>
<li>二级子菜单DB</li>
<li>二级子菜单DC</li>
<li>二级子菜单DD</li>
<li>二级子菜单DE</li>
</ul>
<li onmouseover="openDropSubMenu(this);">关于一级子菜单E</li>
<ul>
<li>二级子菜单EA</li>
<li>二级子菜单EB</li>
<li>二级子菜单EC</li>
<li>二级子菜单ED</li>
</ul>
</ul>
<li onmouseover="openDropMenu(this);">解决方案</li>
<ul>
<li>解决方案一级子菜单A</li>
<ul>
<li>二级子菜单AA</li>
<li>二级子菜单AB</li>
</ul>
<li>解决方案一级子菜单B</li>
<ul>
<li>二级子菜单BA</li>
<li>二级子菜单BB</li>
<li>二级子菜单BC</li>
</ul>
<li>解决方案一级子菜单C</li>
<ul>
<li>二级子菜单CA</li>
<li>二级子菜单CB</li>
<li>二级子菜单CC</li>
<li>二级子菜单CD</li>
</ul>
<li>解决方案一级子菜单D</li>
<ul>
<li>二级子菜单DA</li>
<li>二级子菜单DB</li>
<li>二级子菜单DC</li>
<li>二级子菜单DD</li>
<li>二级子菜单DE</li>
</ul>
<li>解决方案一级子菜单E</li>
<ul>
<li>二级子菜单EA</li>
<li>二级子菜单EB</li>
<li>二级子菜单EC</li>
<li>二级子菜单ED</li>
</ul>
</ul>
</ul>
</div>
</body>
</html>
本方法利用简单的ul与li标签实现菜单的结构，看起来非常自然，但还有一些问题，主要包括在以下方面：
1.没有实现在FireFox中显示出同样的效果；
2.还没有增加任何对菜单项目的CSS样式；
3.还想做成，只要在DIV中提供一个CSS样式就能够自动增加子项目的CSS样式和JAVASCRIPT代码，不在界面中做更做设置，简化界面的设置；
详细功能现在没有时间来进行说明，先将代码贴上；
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述