js实验2.(2)制作二级菜单

来源：互联网发布：淘宝投诉管理在哪编辑：程序博客网时间：2024/05/27 03:27

要求和说明：

在不改动html的body内的已设计元素的情况下，如，不能为元素增加类和id，实现下面功能：

(1) 先用css制作好下拉菜单。

(2) 然后取消css的hover功能，并用mouseover和mouseout进行实现。

编程参考：

(1) home图片采用背景图实现

(2) 通过document.querySelectorAll("#nav>li")取到主菜单（数组）。

(3) 通过闭包和addEventListener设置鼠标mouseover和mouseout事件：

循环执行函数(function(ind){})(i)来绑定每个菜单项的事件

完整代码如下：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>menu</title><style>   *{       padding:0;   }   body{   margin-top:30px;   margin-left:10px;   margin-right:10px;   }   a:link,a:visited {text-decoration:none;color:blue}   #nav>li ul li{display:inline-block;padding:10px;}   #nav,#nav>li>ul {   background: linear-gradient(90deg,rgba(200,200,180,0.9),rgba(200,200,200,0.9));   }   #nav>li{   position:relative;   display:inline-block;   }   #nav>li{margin-left:10px;}   #nav>li>ul{position:absolute;width:8rem;list-style-type:none;left:0;display:none;}   //二级菜单display:none暂时不显示出来</style></head><body>   <ul id="nav">     <li><a href="index.htm"><span class="home">   </span></a>     </li>     <li><a href="zdgk/index.htm"><span>学校概况</span></a>         <ul> <li><a href="zdgk/zdgk01/index.htm">中大简介</a></li>              <li><a href="zdgk/zdgk02/index.htm">中大校区</a></li>              <li><a href="zdgk/zdgk03/index.htm">现任领导</a></li>              <li><a href="zdgk/zdgk04/index.htm">管理服务</a></li>              <li><a href="zdgk/zdgk06/index.htm">校歌 校训 校徽</a></li>              <li><a href="zdgk/zdgk07/index.htm">数字中大</a></li>              <li><a href="zdgk/zdgk05/index.htm">中大校史</a></li>              <li><a href="zdgk/zdgk08/index.htm">中大图志</a></li>        </ul>     </li>     <li><a href="yx/index.htm"><span>院系设置</span></a>     </li>     <li><a href="xksz/index.htm"><span>学科与师资</span></a>        <ul>           <li><a href="xksz/xksz01/index.htm">学科建设</a></li>           <li><a href="xksz/xksz02/index.htm">人才名录</a></li>           <li><a href="xksz/xksz03/index.htm">名师垂范</a></li>        </ul>     </li>     <li><a href="jyjx/index.htm"><span>教育教学</span></a>        <ul>           <li><a href="jyjx/jyjx01/index.htm">本科教育</a></li>           <li><a href="jyjx/jyjx02/index.htm">研究生教育</a></li>           <li><a href="jyjx/jyjx03/index.htm">国际教育</a></li>           <li><a href="jyjx/jyjx04/index.htm">继续教育</a></li>        </ul>     </li>     <li><a href="kxyj/index.htm"><span>科学研究</span></a>        <ul>          <li><a href="kxyj/kxyj01/index.htm">重点研究机构</a></li>          <li><a href="kxyj/kxyj04/index.htm">学术期刊</a></li>          <li><a href="kxyj/kxyj05/index.htm">博士后科研流动站</a></li>        </ul>     </li>     <li><a href="zsjy/index.htm"><span>招生与就业</span></a>        <ul>          <li><a href="zsjy/zsjy01/index.htm">本科招生</a></li>          <li><a href="zsjy/zsjy02/index.htm">研究生招生</a></li>          <li><a href="zsjy/zsjy03/index.htm">留学生招生</a></li>          <li><a href="jyjx/jyjx04/index.htm">继续教育招生</a></li>          <li><a href="zsjy/zsjy04/index.htm">就业指导与服务</a></li>        </ul>     </li>     <li><a href="http://library.sysu.edu.cn"><span>图书馆</span></a>     </li>     <li><a href="rczp/index.htm"><span>人才招聘</span></a>     </li>     <li><a href="xyjj/index.htm"><span>校友与基金</span></a>     </li>     <li><a href="zjzd/index.htm"><span>走进中大</span></a>         <ul>           <li><a href="http://myspace.sysu.edu.cn">5D空间</a>           <li><a href="zjzd/zjzd02/index.htm">校区地图</a>           <li><a href="zjzd/zjzd03/index.htm">生活服务</a>           <li><a href="zjzd/zjzd04/index.htm">中大博物馆</a>           <li><a href="zjzd/zjzd05/index.htm">校园文化</a>         </ul>     </li>    </ul><script>var t=document.querySelectorAll("#nav>li>ul"); //取到二级菜单（数组）var home=document.querySelectorAll("#nav>li");//去到一级菜单home[0].innerHTML="<a href=\"index.htm\"><span><img style=\"height=75%;padding:0;vertical-align: middle;\" src=\"images/home.gif\"></span></a>";for(var i=0;i<11;i++){(function(i) {t[i].parentNode.onmouseover=function(){t[i].style.display="inline-block";}t[i].parentNode.onmouseout=function(){t[i].style.display="none";}})(i);}</script></body></html>

可以看到利用Javascript，比CSS3高效，简洁很多。

0 0