jquery多级菜单列表

最新推荐文章于 2023-08-04 14:42:24 发布

bug狂人

最新推荐文章于 2023-08-04 14:42:24 发布

阅读量2.1k

点赞数 2

分类专栏： js 文章标签：多级菜单菜单列表 n级列表 n级菜单

本文链接：https://blog.csdn.net/weixin_41913666/article/details/89520353

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

获取数据demo。


<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
var loadLayerMenu=function()
{
	var tempName="三级菜单";
	//标题；
	var menu="<a href=\"#!\"><i class=\"mdi mdi-home\"></i> 用户</a>"; 
	var title=$("<li class=\"nav-item active\"></i>").append(menu); 
	$(".nav-drawer").append(title); //拿到ul标签并插入数据；
	
	/*循环插入标签定义*/
	//多级标签定义
	var submenu_li="<li class=\"nav-item nav-item-has-subnav\"></li>";
	var submenu_a="<a href=\"#!\" onclick=\"fun(this.name)\" name=\"name\"><i class=\"mdi mdi-menu\"></i> 多级菜单1</a>";
	var submenu_ul="<ul class=\"nav nav-subnav\"></ul>";
	//单独标签定义
	var onlySubmenu="<li><a href=\"#!\" onclick=\"fun(this.name)\" name=\"name\">"+tempName+"</a></li>";
	//循环模拟插入
	for(var i=0;i<4;i++)
	{
		if(i==1||i==3){
			$(".nav-drawer").append(submenu_li);  
			$("li.nav-item-has-subnav").append(submenu_a);
			$("li.nav-item-has-subnav").append(submenu_ul);
		}else{
			$(".nav-subnav").append(onlySubmenu);
		}
	}
}
</script>
</head>
<body>

<p class="nav-drawer">This is a paragraph.</p>
<button onclick="loadLayerMenu()">追加文本</button>

</body>
</html>

下面是测试网址。复制粘贴测试就可以了

http://www.w3school.com.cn/tiy/t.asp?f=jquery_html_append2

bug狂人

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery多级菜单列表

获取数据demo。<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>var loadLayerMenu=function(){ var tempName="三级菜单"; //标题；...
复制链接

扫一扫