jody
jody
  • 发布:2015-06-01 10:58
  • 更新:2019-02-25 09:42
  • 阅读:6891

关于使用三级列表问题

分类:MUI

请教下各位,在app中需要使用到三级列表,现在的问题是展开一级时就可以看到三级的列表项,而且二级无法收缩和展开三级的列表项,请各位指点下如何解决,谢谢大家!
论坛无法上传图片?

<ul class="mui-table-view">  
	<li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right">一级1</a>  
		<ul class="mui-table-view mui-collapse">  
			<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right">二级1</a>  
				<ul class="mui-table-view mui-input-group " >  
					<li class="mui-input-row  mui-checkbox">  
						<label>三级1</label>  
						<input type="checkbox">  
					</li>  
					<li class="mui-input-row  mui-checkbox">  
						<label>三级2</label>  
						<input type="checkbox">  
					</li>  
				</ul>  
			</li>  
			<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right">二级2</a>  
				<ul class="mui-table-view mui-input-group "></ul>  
			</li>  
		</ul>  
	</li>  
	<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right">一级2</a>  
	</li>  
</ul>
2015-06-01 10:58 负责人:无 分享
已邀请:
s***@163.com

s***@163.com

自己改造的三级列表,大家可以参考下,有可改进的告诉我哈

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="utf-8">  
		<title>Hello MUI</title>  
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
		<meta name="apple-mobile-web-app-capable" content="yes">  
		<meta name="apple-mobile-web-app-status-bar-style" content="black">  
		<!--标准mui.css-->  
		<link rel="stylesheet" href="../css/mui.min.css">  
		<!--App自定义的css-->  
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->  
		<style>  
			.mui-table-view-cell.mui-collapse-3 .mui-table-view .mui-table-view-cell:last-child:after, .mui-table-view-cell.mui-collapse-3 .mui-table-view:after, .mui-table-view-cell.mui-collapse-3 .mui-table-view:before { height:0 }  
			.mui-table-view-cell.mui-collapse-3>.mui-navigate-right:after, .mui-table-view-cell.mui-collapse-3>.mui-push-right:after { content:'\e581' }  
			.mui-table-view-cell.mui-collapse-3.mui-active { margin-top:-1px }  
			.mui-table-view-cell.mui-collapse-3.mui-active>.mui-navigate-right:after, .mui-table-view-cell.mui-collapse-3.mui-active>.mui-push-right:after { content:'\e580' }  
			.mui-table-view-cell.mui-collapse-3 .mui-collapse-content>.mui-input-group, .mui-table-view-cell.mui-collapse-3 .mui-collapse-content>.mui-slider { width:auto; height:auto; margin:-8px -15px }  
			.mui-table-view-cell.mui-collapse-3 .mui-collapse-content>.mui-slider { margin:-8px -16px }  
			.mui-table-view-cell.mui-collapse-3 .mui-table-view { display:none; margin-top:11px; margin-right:-15px; margin-bottom:-11px; margin-left:-15px; border:0 }  
			.mui-table-view-cell.mui-collapse-3 .mui-table-view.mui-table-view-chevron { margin-right:-65px }  
			.mui-table-view-cell.mui-collapse-3 .mui-table-view .mui-table-view-cell { padding-left:31px; background-position:31px 100% }  
			.mui-collapse-content{margin-left: 30px;}  
		</style>  
	</head>  
	<body>  
		<header class="mui-bar mui-bar-nav">  
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
			<h1 class="mui-title">折叠面板</h1>  
		</header>  
		<div class="mui-content">  
			<div class="mui-card">  
				<ul class="mui-table-view">  
					<li class="mui-table-view-cell mui-collapse-3">  
						<a class="mui-navigate-right" href="#">一级菜单1</a>  
						<ul class="mui-table-view">  
							<li class="mui-table-view-cell mui-collapse-3">  
								<a class="mui-navigate-right" href="#">二级菜单1-1</a>  
								<ul class="mui-table-view">  
									<li class="mui-table-view-cell">  
										<div class="mui-collapse-content">  
											<div class="mui-input-row">内容1-1-1</div>  
											<div class="mui-input-row">内容1-1-2</div>  
										</div>  
									</li>  
								</ul>  
							</li>  
							<li class="mui-table-view-cell mui-collapse-3">  
								<a class="mui-navigate-right" href="#">二级菜单1-2</a>  
								<ul class="mui-table-view">  
									<li class="mui-table-view-cell">  
										<div class="mui-collapse-content">  
											<div class="mui-input-row">内容1-2-1</div>  
											<div class="mui-input-row">内容1-2-2</div>  
										</div>  
									</li>  
								</ul>  
							</li>  
						</ul>  
					</li>  
					<li class="mui-table-view-cell mui-collapse-3">  
						<a class="mui-navigate-right" href="#">一级菜单2</a>  
						<ul class="mui-table-view">  
							<li class="mui-table-view-cell mui-collapse-3">  
								<a class="mui-navigate-right" href="#">二级菜单2-1</a>  
								<ul class="mui-table-view">  
									<li class="mui-table-view-cell">  
										<div class="mui-collapse-content">  
											<div class="mui-input-row">内容2-1-1</div>  
											<div class="mui-input-row">内容2-1-2</div>  
										</div>  
									</li>  
								</ul>  
							</li>  
							<li class="mui-table-view-cell mui-collapse-3">  
								<a href="#">二级菜单2-2</a>  
							</li>  
						</ul>  
					</li>  
					<li class="mui-table-view-cell mui-collapse-3">  
						<a href="#">一级菜单3</a>  
					</li>  
				</ul>  
			</div>  
		</div>  
		<script src="../js/mui.min.js"></script>  
		<script>  
			mui.init({  
				swipeBack:true //启用右滑关闭功能  
			});  
			var inputTap = false;  
			mui('.mui-card').on('tap','.allSelect',function(){  
				inputTap=true;  
			});  
			mui('.mui-card').on('tap','.mui-navigate-right',function(){  
				if(inputTap){  
					inputTap=false;  
					return;  
				}  
				//记录状态  
		        var li=this.parentNode;  
		        var ul=this.parentNode.querySelector('.mui-table-view');  
		        var _style=ul.style.display;  
		        //关闭同级菜单  
		        var parent=this.parentNode.parentNode.children;  
		        for(var i=0;i<parent.length;i++){  
		        	if(!!parent[i].querySelector('.mui-table-view')){  
		        		parent[i].querySelector('.mui-table-view').style.display='';  
		        		removeClass(parent[i], 'mui-active');  
		        	}  
		        }  
		        //更改状态  
		        if(_style=='block'){  
		        	ul.style.display='';  
		        	removeClass(li,'mui-active');  
		        }else{  
		        	ul.style.display='block';  
		        	addClass(li,'mui-active');  
		        }  
		        //关闭下级子菜单  
		        var children=ul.children;  
		        for(var i=0;i<children.length;i++){  
		        	var child=children[i].querySelector('.mui-table-view');  
		        	if(!!child){  
		        		child.style.display='';  
		        		removeClass(children[i], 'mui-active');  
		        	}  
		        }  
		    });  
			function hasClass(obj, cls) {    
			    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));    
			}    
			function addClass(obj, cls) {    
			    if (!this.hasClass(obj, cls)) obj.className += " " + cls;    
			}    
			function removeClass(obj, cls) {    
			    if (hasClass(obj, cls)) {    
			        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');    
			        obj.className = obj.className.replace(reg, '');    
			    }    
			}    
		</script>  
	</body>  
</html>
  • z***@sina.com

    我直接将你的代码复制到一个空白html中,第一级菜单都无法展开呀


    2016-06-01 11:37

  • 顶面

    就是第三级的样式不怎么好


    2016-07-25 10:11

  • 7***@qq.com

    改成这样蛮不错了,可以直接拿来用的,谢谢楼主提供


    2018-04-27 21:56

  • l***@163.com

    楼主求解 为何我将您的代码测试后效果不能显示


    2019-05-19 20:35

DCloud_UNI_FXY

DCloud_UNI_FXY

暂不支持三级列表

jklin

jklin

有支持三级或者更多级列表的计划吗?就像微信企业号的官方通讯录那样?

星空学者

星空学者

什么时候加入三级列表啊,需要这个

JBoss

JBoss

三级列表和无限级别的列表,最好都能提供。

leeH

leeH

三级列表和无限级别的列表,最好都能提供。

1***@qq.com

1***@qq.com

三级列表和无限极别的列表现在支持吗?

逗逗水

逗逗水

怎么将mui自带的三级地址内容改为自己数据表中的动态数据

1***@qq.com

1***@qq.com

二级菜单无法展开数据啊

l***@qq.com

l***@qq.com

希望能支持三折叠功能

t***@163.com

t***@163.com - 80后

无极折叠面板什么时候才能有啊。你看看人家为知客户端的折叠面板!

7***@qq.com

7***@qq.com

可以尝试jquery-mobile,可多级折叠

该问题目前已经被锁定, 无法添加新回复