<!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>
php无限极菜单
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
相关阅读更多精彩内容
- 需后端返回数据结构如下: 后端实现方法可参考: 菜单栏数据递归实现 新建MenuBar.vue文件,实现获取后端数...
