js实现下拉菜单

来源：互联网发布：mysql date_format 24 编辑：程序博客网时间：2024/05/25 19:58

html部分

<li class="" onmouseover="show(this)" onmouseout="hide(this)" ><a href="{:U('Home/Group/groupshowlist')}">课程和班级</a>   <ul class="dropdown-menu" role="menu">      <li><a href="__ROOT__/open/course/explore">公开课</a></li>      <li><a href="__ROOT__/course/explore/fuction">课程功能</a></li>      <li><a href="__ROOT__/course/explore/administrator">系统管理</a></li>      <li><a href="__ROOT__/course/explore/app">官方应用</a></li>      <li><a href="__ROOT__/classroom/explore" target="_blank">班级中心</a></li>   </ul></li>

js部分

<script>    function show(li){        var ul= li.getElementsByTagName("ul")[0];        // 关建二：在li这个对象内查询标签名为ul的标签，由于二级标签只有一个，所以索引为0即可。        ul.style.display="block";        // 关键三：当鼠标划过li时，其子元素ul标签的display为block    }    function hide(li){        var ul= li.getElementsByTagName("ul")[0];        ul.style.display="none";    // 关键四：当鼠标划出li时，其子元素ul的display为none    }</script>

0 0