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>

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

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试

关闭