mui 折叠面板accordion 并行排列的实现

最新推荐文章于 2022-04-11 17:29:01 发布

xie_candy

最新推荐文章于 2022-04-11 17:29:01 发布

阅读量518

点赞数 1

分类专栏： mui

本文链接：https://blog.csdn.net/xie_candy/article/details/103089723

版权

mui 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果图如下：

css:

@charset "utf-8";

/*搜索框*/

div.mui-input-row.mui-search {
	margin: 0;
	margin-bottom: -8px;
	background-color: #fff;
	padding: 7px 15px 0 15px;
}

div.mui-input-row span {
	font-size: 12px;
}

input[type='search'] {
	font-size: 14px;
	font-family: "苹方", "微软雅黑";
	color: #333;
	border-radius: 5px;
	box-shadow: inset 0px 1px 6px 0px #d5d4d4;
	background-color: #FFF;
	border: 1px solid #ddd;
}

.mui-search .mui-placeholder {
	top: 5px;
	left: 20px;
}

div.mui-input-row.mui-search.mui-active::before {
	top: 32px;
	padding-left: 18px;
}

.mui-input-row:after {
	height: 0;
}


/*折叠面板*/

li.mui-table-view-cell {
	position: static;
}

.mui-table-view-cell>a:not(.mui-btn) {
	margin: 0;
}

a.mui-navigate-right {
	height: 44px;
	background-color: #fff;
	line-height: 44px;
	text-align: center;
	font-size: 14px;
	border: 1px solid #ddd;
	border-left: 0;
}

.mui-table-view-cell.mui-collapse.mui-active {
	margin-top: 0px;
}

.mui-navigate-right:after,
.mui-push-left:after,
.mui-push-right:after {
	font-size: 22px;
	font-weight: 800;
	color: #333;
}

.mui-navigate-right:after,
.mui-push-right:after {
	right: 18%;
}

.padding-left-15px {
	padding-left: 15px;
}

div.mui-table-view-cell {
	padding: 3px 15px;
}

li.mui-table-view-cell:nth-child(1):after {
	height: 0;
}


/*复选框样式更改*/

.mui-radio input[type='radio']:before {
	content: '';
	/* 更改未选中的样式*/
	
}

.mui-radio input[type='radio']:checked:before {
	content: '\e472';
	/* 更改选中的样式*/
	font-size: 40px;
}

.mui-mui-radio input[type='radio'] {
	top: 0;
}

.mui-input-row label {
	font-family: "苹方", "微软雅黑";
}

html:

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/car-search.css" />

		<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-input-row mui-search">
					<input type="search" class="" placeholder="搜索车位">
				</div>

				<ul class="mui-table-view mui-row" style="position: fixed;width: 100%;margin: 0;">
					<li class="mui-table-view-cell mui-collapse mui-disabled mui-inline" style="padding: 0;">
						<a class="mui-navigate-right" href="#" style="position: absolute;left: 0;width: 50%;">车位类型</a>
						<div class="mui-collapse-content" style="position:absolute;margin:0; margin-top: 44px;padding: 0;width: 100%;overflow: hidden;">
							<div class="mui-table-view-cell">
								<div class="mui-input-row mui-radio ">
									<label>全部</label>
									<input name="radio1" type="radio" checked>
								</div>
							</div>
							<div class="mui-table-view-cell">
								<div class="mui-input-row mui-radio ">
									<label>标准车位</label>
									<input name="radio2" type="radio" checked>
								</div>
							</div>
							<div class="mui-table-view-cell">
								<div class="mui-input-row mui-radio">
									<label>豪车位</label>
									<input name="radio3" type="radio" checked>
								</div>
							</div>
							<div class="mui-table-view-cell">
								<div class="mui-input-row mui-radio ">
									<label>微型车位</label>
									<input name="radio4" type="radio" checked>
								</div>
							</div>
							<div class="mui-table-view-cell" style="border-bottom: 1px solid #ddd;">
								<div class="mui-input-row mui-radio ">
									<label>残疾人车位</label>
									<input name="radio5" type="radio" checked>
								</div>
							</div>
						</div>
					</li>

					<li class="mui-table-view-cell mui-collapse mui-disabled mui-inline" style="padding: 0;">
						<a class="mui-navigate-right" href="#" style="position: absolute;left: 50%;width: 50%;">车场分区</a>
						<div class="mui-collapse-content" style="position:absolute;margin:0; margin-left: -4px; margin-top: 44px;padding: 0;width: 100%;overflow: hidden;">
							<div class="mui-table-view-cell">
								<div class="mui-input-row mui-radio ">
									<label>全部</label>
									<input name="radio" type="radio" checked>
								</div>
							</div>
							<div class="mui-table-view-cell">
								<div class="mui-input-row mui-radio ">
									<label>A区</label>
									<input name="A区" type="radio" checked>
								</div>
							</div>
							<div class="mui-table-view-cell" style="border-bottom: 1px solid #ddd;">
								<div class="mui-input-row mui-radio ">
									<label>B区</label>
									<input name="B区" type="radio" checked>
								</div>
							</div>

						</div>
					</li>

				</ul>

				<script src="../../js/mui.min.js"></script>
				<script type="text/javascript">
					mui.init()
				</script>
		</body>

</html>

xie_candy

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
mui 折叠面板accordion 并行排列的实现

效果图如下：css:@charset "utf-8";/*搜索框*/div.mui-input-row.mui-search { margin: 0; margin-bottom: -8px; background-color: #fff; padding: 7px 15px 0 15px;}div.mui-input-row span { font-size...
复制链接

扫一扫