<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无限级菜单展示</title>
</head>
<body>
<?php
//1.无限级菜单结构设计---[菜单名称,菜单ID,父菜单ID]
//2.做一个用户登录(数组存储6个用户[帐号，密码])---post方式提交表单
$nodes = array(
array('title'=>'中国','id'=>1,'parentId'=>0),
array('title'=>'美国','id'=>2,'parentId'=>0),
array('title'=>'北京','id'=>3,'parentId'=>1),
array('title'=>'上海','id'=>4,'parentId'=>1),
array('title'=>'四川省','id'=>5,'parentId'=>1),
array('title'=>'内江','id'=>6,'parentId'=>5),
array('title'=>'成都','id'=>7,'parentId'=>5),
array('title'=>'温江','id'=>8,'parentId'=>7),
array('title'=>'威远','id'=>9,'parentId'=>6)
);
?>
<ul id="nodes">
<?php
foreach($nodes as $v){
?>
<li class="node<?=$v['parentId']?>" data-id="<?=$v['id']?>" data-pid="<?=$v['parentId']?>"><?=$v['title']?></li>
<?php
}
?>
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var nodeItems = $('#nodes li');
nodeItems.each(function () {
var id = $(this).data('id');
var childs = $('.node'+id);
if(childs.length){
var ul = document.createElement('ul');
$(ul).append(childs);
$(this).append(ul);
}
});
</script>
</ul>
<ul>
<li>中国
<ul>
<li>四川省
<ul>
<li>成都
<ul>
<li>温江</li>
</ul>
</li>
<li>内江
<ul>
<li>威远</li>
<li>仁寿</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
网友评论