jquery+递归自动生成无限级菜单

最新推荐文章于 2024-04-26 09:09:20 发布
最新推荐文章于 2024-04-26 09:09:20 发布
阅读量3.6k 收藏 6
点赞数 1 
 

  • 1
  • 2
  • 3
 

 <!DOCTYPE html>
<html>
<head>
<meta charset="GB18030">
<title>Insert title here</title>
<style type="text/css">
    #menu {border: 1px solid black; }
    #menu li {list-style: none;}
    #menu li ul {display: none;}
</style>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        //创建类，采用键值对的方式 
        var obj = {"menu1":"a", "menu2":{"item1":"bb","item2":"cc"}, "menu3":{"item1":"aa","item2":"bb","item3":{"button1":"b1","button2":"b2"}}};
        buildMenu(obj);
        $("#menu").html(buildMenu(obj));
        $("#menu ul li").click(function () {
            $(this).siblings().find("ul").css("display", "none"); //找到同一级的ul将其隐藏 
            if ( $(this).has("ul").length > 0 ) {
                $(this).children("ul").css("display", "block");   //如果是ul将其子项显示出来 
            }
        });
    });
    //创建按钮
    function buildMenu(obj) {
        var str = "<ul>";
        $.each(obj, function (index, item) {
            if (typeof(obj[index]) == "object") {
                str += "<li>" + index;
                str += buildMenu(obj[index]); //递归判断是不是object,直到不是li 
                str += "</li>";
            }
            else {
            //  alert(index + "--" + obj[index]);  //item == obj[index]
                str += "<li>" + index + "</li>" 
            }
        });
        str += "</ul>";
        return str;
    }
</script>
</head>
<body>
    <div id="menu"></div>
</body>
</html>
 

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
 

效果如下： 
这里写图片描述
 

点击同一级的菜单可以隐藏。修改的话，只需要在obj里面添加，就是可以了。

                

        

        

    




    

      

        

            

              
                
                  qmdweb
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    6
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
jquery用递归实现菜单选择

				
			

			

				

					09-06
				

			

		

		

			
				
通过递归实现不定层菜单选择，点击菜单项之后，自动完成父菜单子菜单的选择等功能

			
		

	



                

              
                



	

		

			

				
					
自制无限级tree(采用递归算法)

				
			

			

				

					03-07
				

			

		

		

			
				
自制无限级tree(采用递归算法)，非常完美，有需要的同学可以下载。

			
		

	



                


  
              

                


	

		

			

				
					
jquery,tree无限级树形菜单+简单实用案例

				
			

			

				

					u013948191的专栏
				

				

					07-09
					
					5358
					
				

			

		

		

			
				
jquery,tree无限级树形菜单+简单实用案例

我在项目中用到产品类别的树形。各种地方都要用。 我就封装起来，方便以后调用。

记录下来，希望给新手们提供帮助。要记得导入jquery.js  tree.js 哦








%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  


			
		

	





	

		

			

				
					
使用递归方式实现多级菜单树 Java实现

					
最新发布

				
			

			

				

					GSIBin
				

				

					04-26
					
					494
					
				

			

		

		

			
				
在Java中，使用递归来实现菜单树通常涉及到遍历原始菜单列表，并为每个菜单项找到其对应的子菜单项。这个过程可以通过创建一个方法来完成，该方法会检查每个菜单项的parentId，并将其作为子菜单项添加到具有相应id的父菜单项的children列表中。

			
		

	



		

			
		



	

		

			

				
					
jquery实现无限级别的多级菜单(自己封装的插件)

				
			

			

				

					hhy1006894859的博客
				

				

					12-10
					
					2519
					
				

			

		

		

			
				
demo的下载地址：https://download.csdn.net/download/hhy1006894859/10845124

js代码如下：


var list = [
    {
        "menuName": "项目管理",
        "level":1,
        "childTree": [{
            "menuName": "项目进度&qu

			
		

	





	

		

			

				
					
使用递归展示无极限树

				
			

			

				

					人活着就是为了开心
				

				

					10-25
					
					179
					
				

			

		

		

			
				

公司需求是 根据当前员工查找他对应整个分公司及部门的名字，思路：根据员工查找出他属于哪个分公司，拿到分公司PID（可以理解为是子公司的父节点ID），再使用递归方法依次查找，（在递归方法中只要你传父节点ID，不管其子下有没有子节点），
效果图：
 
现在贴代码：
package com.neusoft.talentbase.organization.orgunit.orgunit.vo;
...

			
		

	





	

		

			

				
					
s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单.rar

				
			

			

				

					09-09
				

			

		

		

			
				
本项目“s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单”就是这样一个解决方案，它整合了多种技术来实现这一功能。  首先，我们来看“s2sh”。这是Struts2、Spring和Hibernate三者的简称，它们分别是MVC...

			
		

	





	

		

			

				
					
jquery+js 实现无限级菜单(分销)树行结构

				
			

			

				

					10-27
				

			

		

		

			
				
递归函数可以用来处理无限级菜单，每次遇到有子菜单的菜单项时，递归调用自身，生成子级菜单。  此外，为了让菜单具有交互性，可能还需要添加事件监听器，例如点击某个菜单项时展开或收起其子菜单。jQuery的`click()...

			
		

	





	

		

			

				
					
jQuery 无限级菜单的简单实例

				
			

			

				

					10-26
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用jQuery创建一个无限级菜单的简单实例。无限级菜单是一种在网站导航中常见的设计，它允许用户通过无限层级的子菜单来浏览复杂的内容结构。以下是一个基本的实现方法。  首先，我们...

			
		

	





	

		

			

				
					
jQuery递归无限极树状菜单特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
本文将详细解析"jQuery递归无限极树状菜单特效代码"的相关知识点，帮助你理解和实现类似的菜单效果。  首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互等任务。在本例中...

			
		

	





	

		

			

				
					
不用递归实现的无限级树型菜单

				
			

			

				

					06-21
				

			

		

		

			
				
本主题介绍了一种不依赖递归的高效方法来创建无限级树型菜单，具有快速加载的特点。  首先，我们来看`WriteXML.ashx`，这是一个HTTP Handler，可能用于动态生成XML数据。在不使用递归的情况下，我们可以利用迭代的...

			
		

	





	

		

			

				
					
jQuery递归无限极树状菜单

				
			

			

				

					06-24
				

			

		

		

			
				
jQuery递归无限极树状菜单是一款用递归实现的无限极树状菜单，点击可以展开收缩。

			
		

	





	

		

			

				
					
jquery多级菜单复杂权限设置系统

				
			

			

				

					09-07
				

			

		

		

			
				
jquery实现的漂亮多级菜单 ，另带复杂权限设置模块 （自带数据库）

			
		

	





	

		

			

				
					
jquery实现递归tr子节点

				
			

			

				

					09-14
				

			

		

		

			
				
jquery实现递归table-tr，可并记录tr对应的index，写入Array中，方便后期处理。
jquery实现递归table-tr，可并记录tr对应的index，写入Array中，方便后期处理。

			
		

	





	

		

			

				
					
JS无限级树形菜单

				
			

			

				

					08-27
				

			

		

		

			
				
JS无限级树形菜单3种

			
		

	





	

		

			

				
					
用jQuery递归实现checkbox树的勾选与否

				
			

			

				

					a123132123的博客
				

				

					10-18
					
					176
					
				

			

		

		

			
				
今天在做添加权限的功能时，发现如果将权限用树展示出来会得到很好的效果，如下：

其中勾线父级目录会让其子目录也跟着勾选，取消父级目录的勾选同样会让子目录取消勾选。


其中每一个节点的结构如下：

分析一下该节点，有一个class='inverted' ,还有一个value，这个value可以唯一标识当前节点，相当于数据库里面的主键，不会重复（该value是由后台分配而...

			
		

	





	

		

			

				
					
jquery实现递归table-tr

				
			

			

				

					ASP.NET
				

				

					09-14
					
					754
					
				

			

		

		

			
				
将文件代码保存到本地html中下载demo，引入js下载jquery.1.83.min.js看效果。





    jquery实现递归table-tr
    
        /*表格*/
        .table{border-collapse: collapse; word-break: keep-all; border:1px solid Black;}
        .t

			
		

	





	

		

			

				
					
JavaScript递归算法生成树形菜单

				
			

			

				

					08-05
				

			

		

		

			
				
JavaScript递归算法可以用于生成树形菜单。下面是一个示例代码：

```javascript// 假设有以下数据结构const menuItems = [
 { id:1, name: '菜单1', parentId: null },
 { id:2, name: '菜单1.1', parentId:1 },
 { id:3, name: '菜单1.2', parentId:1 },
 { id:4, name: '菜单1.2.1', parentId:3 },
 { id:5, name: '菜单2', parentId: null },
];

function generateMenuItems(menuItems, parentId = null) {
 const result = [];
 for (const item of menuItems) {
 if (item.parentId === parentId) {
 const children = generateMenuItems(menuItems, item.id);
 if (children.length >0) {
 item.children = children;
 }
 result.push(item);
 }
 }
 return result;
}

const treeMenu = generateMenuItems(menuItems);
console.log(treeMenu);
```

在这个示例代码中，`generateMenuItems` 函数接受一个菜单项数组和一个父菜单项的ID作为参数。它会遍历菜单项数组，找到所有具有指定父菜单项ID的子菜单项，并递归地生成子菜单。最后，它会返回一个树形结构的菜单项数组。

希望这个示例能帮到你！如果你有任何问题，请随时问我。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值