看看这个如何，是否符合阁下要求？
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312">
<title></title>
<style type="text/css">
.menus{
float:left
color:#0C0
font-size:18px
border:2px #0C0 solid
width:120px
height:40px
text-align:center
padding-top:20px
margin-right:-2px
}
.add{
float:left
color:#999
background-color:#F8F8F8
font-size:32px
border:1px #CCC solid
border-left:2px #0C0 solid
width:120px
height:50px
text-align:center
padding-top:12px
cursor:pointer
}
</style>
<script type="text/javascript">
window.onload=function(){
var add1=document.getElementById("add")
add1.onclick=function(){
addElement()
}
}
var i=1
function addElement(){
var box=document.getElementById("box")
var oDiv=document.createElement("div")
oDiv.setAttribute("class","menus")
oDiv.appendChild(document.createTextNode(prompt("在此输入菜单名称")))
box.appendChild(oDiv)
i++
box.insertBefore(oDiv,box.childNodes[i])
}
</script>
</head>
<body>
<div id="box">
<div class="menus">菜单名称</div>
<div class="add" id="add"><b>+</b></div>
</div>
</body>
</html>
angularjs处理动态菜单的实现方法：1、核心angularjs代码：
var testImg=angular.module("appTest",["ms.leafMenu"])
.controller('testCtr',['$scope',function($scope){
$scope.data=[{"id":"1","pid":"0","name":"第一行","children":[{"id":"3","pid":"1","name":"第一行1.1"},{"id":"4","pid":"1","name":"第一行1.2"}]},{"id":"2","pid":"0","name":"第二行","children":[{"id":"5","pid":"2","name":"第二行2.1"}]}]
}])
angular.module("ms.leafMenu",[])
.directive('msLeafMenu',['$compile',function($compile){
return {
restrict:'EA',
transclude: true,
replace: false,
//template:"<li></li>",
scope:{
data:'=?',
id:'@?',
pid:'@?',
pvalue:'@?',
showname:'@?',
isstandard:'@?'
},
link:function(scope,element,attrs,leafController){
创建节点数据的方法：
function createTreeData(id,pid,pvalue){
var newData=[]
angular.forEach(scope.data,function(item,index){
if(item[pid]==pvalue){
var children=createTreeData(id,pid,item[id])
if(children &&children.length>0){
item.children=children
}
newData.push(item)
}
})
return newData
}
if(!scope.isstandard){
scope.data=createTreeData(scope.id,scope.pid,scope.pvalue)
}
//向节点增加数据
element.append($compile('<ul class="ms_leaf_menu_group"><li ng-repeat="row in data" ng-class="{ms_parent_item:(row.children &&row.children.length>0),ms_child_item:(!row.children || row.children.length<=0)}"><div ng-click="toogle($index)"><a >{{row[showname]}}</a><span class="glyphicon" ng-class="{\'glyphicon-chevron-right\':(row.children &&row.children.length>0 &&!row.isopen),\'glyphicon-chevron-down\':(row.children &&row.children.length>0 && row.isopen)}" aria-hidden="true"></span></div><div ng-show="row.isopen"><ms-leaf-menu data="row.children" id="id" pid="pid" showname="{{showname}}" pvalue="{{row[id]}}"></ms-leaf-menu></div></li></ul>')(scope))
//此处是关键，调用入口处，需要找到index
scope.toogle=function(index){
scope.data[index]["isopen"]=!scope.data[index]["isopen"]
}
}
}
}])
</script>
2、html代码：
<body ng-app="appTest">
<div ng-controller="testCtr" style=" width:200pxmargin-left:automargin-right:auto">
<ms-leaf-menu data="data" id="id" pid="pid" showname="name" pvalue="0"></ms-leaf-menu>
</div>
</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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）