12.2添加下拉菜单

最新推荐文章于 2022-06-27 15:05:38 发布

代码-君

最新推荐文章于 2022-06-27 15:05:38 发布

阅读量566

点赞数

分类专栏： js基础教程随书笔记文章标签：菜单二级导航鼠标事件

js基础教程随书笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
margin-bottom:10px;
}
ul.menu{
display:none;
list-style-type:none;
margin-top:5px;
}
a.menuLink{
font-size:16px;
font-weight:bold;
}
</style>
<script type="text/javascript">
function initAll(){
var allLinks = document.getElementsByTagName("a"); //获取所有a元素节点
for(var i=0; i<allLinks.length; i++){ //遍历素有a元素节点
   if(allLinks[i].className.indexOf("menuLink") > -1){ //如果a元素的className含有字符串menuLink
     allLinks[i].onmouseover = toggleMenu; // 鼠标指针移动到className含有字符串menuLink的a标签调用toggleMenu函数
allLinks[i].onclick = function(){ //onclick方法函数返回false 链接不跳转
   return false;
}
   }
}
};
function toggleMenu(){;
var startMenu = this.href.lastIndexOf("/")+1; //鼠标指针下 a标签的href属性/出现的位置索引+1 从后向前搜索
var stopMenu = this.href.lastIndexOf(".");   //鼠标指针下 a标签的href属性.出现的索引位置     从后向前搜索
var thisMenuName = this.href.substring(startMenu,stopMenu); // 鼠标指针下 a标签的href属性 /出现的位置索引+1和.出现的索引位置之间的字符串
document.getElementById(thisMenuName).style.display = "block"; // 设置ul样式为block
this.parentNode.className = thisMenuName; // 鼠标指针下 a标签的父节点div的className设置为鼠标指针下 a标签的className
this.parentNode.onmouseout = function(){ // 鼠标指针离开鼠标指针下 a标签的父节点div
   document.getElementById(this.className).style.display = "none"; //通过div的className获取div设置样式为none this指的是当前div
}
this.parentNode.onmouseover = function(){// 鼠标指针移入鼠标指针下 a标签的父节点div
   document.getElementById(this.className).style.display = "block";//通过div的className获取div设置样式为block
}
};
window.onload = initAll;
</script>
</head>

代码-君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12.2添加下拉菜单

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档 div{ margin-bottom:10px; } ul.menu{ display:none; list-style-type:none; margin-
复制链接

扫一扫

专栏目录