Js中实现目录的子目录方式

版权声明:本文为博主原创文章,未经博主允许也可以得转载。 https://blog.csdn.net/zrcshendustudy/article/details/79955351
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript">
window.onload=function()
{
var ul=document.getElementsByTagName("ul")[0];
//var lis=ul.getElementsByTagName("li");
var lis=ul.children;//所有的li
lis[0].onmouseover=function()
{
  var cul=this.getElementsByTagName("ul")[0];
  cul.style.display="block";
}
lis[0].onmouseleave=function()
{
  var cul=this.getElementsByTagName("ul")[0];
  cul.style.display="none";
}
lis[1].onmouseover=function()
{
  var cul=this.getElementsByTagName("ul")[0];
  cul.style.display="block";
}
lis[1].onmouseleave=function()
{
  var cul=this.getElementsByTagName("ul")[0];
  cul.style.display="none";
}
lis[2].onmouseover=function()
{
  var cul=this.getElementsByTagName("ul")[0];
  cul.style.display="block";
}
lis[2].onmouseleave=function()
{
  var cul=this.getElementsByTagName("ul")[0];
  cul.style.display="none";
}
}
  </script>
  <style type="text/css">
#menu li{
 /* float:left; */
background:blue;border-right:solid white 1px
}
  </style>
</head>
<body>
  <ul id="menu" style="list-style:none;width:500px" type="circle">
<li>第一章
<ul style="width:100px;float:none;display:none" type="circle">
<li>html基础</li>
<li>java基础</li>
</ul>
</li>
<li>第二章
<ul style="list-style:none;width:100px;float:none;display:none">
<li>html基础1</li>
<li>java基础1</li>
</ul>
</li>
<li>第三章<ul style="list-style:none;width:100px;float:none;display:none">
<li>html基础2</li>
<li>java基础2</li>
</ul>
</li>
  </ul>
<br/>
</body>
</html>
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页