var outName=""
window.onload=function(){
var len = document.getElementsByTagName('a').length
for(var i=0i<leni++)
{
document.getElementsByTagName('a')[i].id='a'+i
document.getElementsByTagName('a')[i].onclick=function(){
outName=Number(this.id.substring(1,this.id.length))
}
}
}
function appendLi(){
var ttt = document.getElementById('ttt').value
var ul = document.createElement('ul')
var li = document.createElement('li')
li.innerHTML=ttt
ul.appendChild(li)
document.getElementById('a'+outName).parentElement.appendChild(ul)
}
</script>
</head>
<body>
<div class="container">
<ul style="display: block">
<li><a href="#" style="font-size: 12px padding-left: 10px">人事管理</a></li>
<li><a href="#" style="font-size: 12px padding-left: 10px">部门管理</a></li>
<li><a href="#" style="font-size: 12px padding-left: 10px">考勤管理</a></li>
</ul>
</div>
<label>
<input type="checkbox" value="" />根目录</label>
<label><br>
<input id="ttt" type="text" value="" /><input type="button" value="添加" onclick="appendLi()"/></label>
</body>
除了html代码<a></a>没有关闭 你的逻辑有点乱
htm导航栏是
<li><a href="" ></a></li><!--a标签要关闭 --><li><a href="></a></li><!--a标签要关闭 -->
<li>
<a href="></a> <!--a标签要关闭 -->
<div class="nav-list" id="dataTd" style="display: none">
<a href=“">人物角色</a>
<a href="">游戏视频</a>
</div>
</li>
html文件中有id为dataTd但是没有dataTh
js是
<script type="text/javascript">var oDiv1=document.getElementById('dataTh')
//获取ID 为dataTh的html元素
var oDiv2=document.getElementById('dataTd')
//获取ID 为dataTd的html元素
var timer=null
//onmouseover代表鼠标划入指定范围 触发事件
oDiv2.onmouseover=oDiv1.onmouseover=function ()
{
clearTimeout(timer)
oDiv2.style.display='block'
oDiv1.className='data-list'
这几句代码的意思是 当鼠标指向id为dataTh或者id为dataTd的元素，触发id为dataTd的元素显示，id为dataTh的元素添加类名为“data-list”的class类
}
//onmouseout代表鼠标离开指定范围 触发事件
oDiv2.onmouseout=oDiv1.onmouseout=function ()
{
timer=setTimeout(function (){
oDiv2.style.display='none'id为dataTd的元素隐藏
oDiv1.className=''id为dataTh的元素去掉类名为“data-list”的class类
}, 100)
每0.1秒执行一次
}
</script>
我给你举个例子
要实现的功能是 当鼠标划过列表中的id="dataTh"的元素时，隐藏的子菜单显示
html页面
<li><a href=" id="dataTh"></a>
<!--子菜单 以下处于隐藏状态 -->
<div class="nav-list" id="dataTd" style="display: none">
<a href=“">人物角色</a>
<a href="">游戏视频</a>
</div>
<!--子菜单 以上处于隐藏状态 -->
</li>
JS
<script type="text/javascript">var oDiv1=document.getElementById('dataTh')
//获取ID 为dataTh的html元素
var oDiv2=document.getElementById('dataTd')
//获取ID 为dataTd的html元素
var timer=null
//onmouseover代表鼠标划入指定范围 触发事件
oDiv1.onmouseover=function ()
{
clearTimeout(timer)
oDiv2.style.display='block'
oDiv1.className='data-list'
//这几句代码的意思是 当鼠标指向id为dataTh的元素，触发id为dataTd的元素显示，id为dataTh的元素添加类名为“data-list”的class类
}
//onmouseout代表鼠标离开指定范围 触发事件
oDiv1.onmouseout=function ()
{
oDiv2.style.display='none'//id为dataTd的元素隐藏
oDiv1.className=''//id为dataTh的元素去掉类名为“data-list”的class类
}
</script>
!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//显示角色详细信息
function showDetail(flag, a) {
var detailDiv = a.parentNode.getElementsByClassName('detail_info')[0]
if (flag) {
detailDiv.style.display = "block"
}
else
detailDiv.style.display = "none"
}
</script>
<script src="../assets/jquery.js"></script>
</head>
<body>
<input type ="button" va
