左右联动效果

最新推荐文章于 2023-05-10 13:42:32 发布

曲小强

最新推荐文章于 2023-05-10 13:42:32 发布

阅读量1.1k

点赞数

分类专栏：小卖部 js

本文链接：https://blog.csdn.net/quhongqiang/article/details/105841472

版权

小卖部 js 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>找医生</title>
		<style type="text/css">
			@charset "utf-8";
			body,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			hr,
			p,
			blockquote,
			dl,
			dt,
			dd,
			ul,
			ol,
			li,
			pre,
			form,
			fieldset,
			legend,
			button,
			input,
			textarea,
			th,
			td {
				margin: 0;
				padding: 0;
			}
			
			body,
			button,
			input,
			select,
			textarea {
				font: 12px/1.5 "\5FAE\8F6F\96C5\9ED1", arial;
				*line-height: 1.5;
			}
			
			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				font-size: 100%;
				font-weight: normal;
			}
			
			address,
			cite,
			dfn,
			em,
			var {
				font-style: normal;
			}
			
			code,
			kbd,
			pre,
			samp {
				font-family: courier new, courier, monospace;
			}
			
			ul,
			ol {
				list-style: none;
			}
			
			fieldset,
			img {
				border: 0;
			}
			
			table {
				/*border-collapse:collapse;*/
				/*border-spacing:0;*/
			}
			
			input,
			button,
			textarea,
			select,
			optgroup,
			option {
				font-family: inherit;
				font-size: inherit;
				font-style: inherit;
				font-weight: inherit;
				font-size: 100%;
			}
			
			div:after,
			ul:after,
			dl:after,
			.clearfix:after {
				content: "";
				display: block;
				clear: both;
				height: 0;
				visibility: hidden;
			}
			/****/
			
			abbr,
			article,
			aside,
			audio,
			canvas,
			datalist,
			details,
			figure,
			footer,
			header,
			hgroup,
			menu,
			nav,
			output,
			progress,
			section,
			video {
				display: block;
				margin: 0;
				padding: 0;
			}
			
			i,
			u,
			b,
			em,
			span,
			small {
				font-weight: normal;
				font-style: normal;
			}
			
			span {
				cursor: pointer;
			}
			
			html,
			body {
				height: 100%;
			}
			/****/
			
			html {
				font-size: 100px;
			}
			
			body {
				-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
				-webkit-user-select: none;
				user-select: none;
				-moz-user-focus: none;
				-moz-user-select: none;
			}
			
			a {
				text-decoration: none;
			}
			
			h2 {
				margin: 0;
				padding: 0;
			}
			
			ul {
				word-spacing: -4px;
			}
			
			#Allcity {
				width: 100%;
				position: fixed;
				box-sizing: border-box;
				left: 0;
				top: .79rem;
				height: 2.75rem;
				overflow: auto;
				background: #fff;
				z-index: 107;
			}
			
			#Allcity .city {
				border-bottom: 1px solid #e5e5e5;
				height: .45rem;
				text-align: center;
				line-height: .45rem;
				color: #404040;
				font-size: .135rem;
			}
			
			#Allcity .city p {
				width: 50%;
				background: #b9f3e4;
			}
			
			#Allcity .city ul {
				width: 50%;
				position: fixed;
				right: 0px;
				top: 79px;
				background: #fff;
				display: block;
				box-sizing: border-box;
				color: #404040;
				text-align: center;
				height: .45rem;
				line-height: .45rem;
				z-index: 110;
				height: 2.75rem;
				overflow: hidden;
				overflow: auto;
				display: none;
			}
			
			#Allcity .city ul li {
				background: #fff;
				border-bottom: 1px solid #e5e5e5;
				font-size: .13rem;
			}
		</style>
	</head>

	<body>
		<section>
			<!--全国地区-->
			<div id="Allcity"></div>
		</section>
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="city.data.js" type="text/javascript" charset="utf-8"></script>
	<!--全国地区-->
	<script type="text/javascript">
		var doms = [];
		cityData.forEach(function(province) {
			var wrap = [];
			province.children.forEach(function(city) {
				wrap.push("<li data=" + city.value + ">" + city.text + "</li>");
			});
			doms.push("<div class='city' data=" + province.value + "><p>" + province.text + "</p><ul class='city_li'>" + wrap.join('') + "</ul></div>");
		});
		document.getElementById('Allcity').innerHTML = doms.join('');
		$('#Allcity .city p').click(function() {
			$('#Allcity .city p').removeClass('found');
			$(this).addClass("found");
			$(".city_li").hide();
			$(this).siblings(".city_li").show();
		});
	</script>

</html>

city.data.js

链接：https://pan.baidu.com/s/1z6nBQ75vDGlgo-XZHtusBQ
提取码：e57d

第二种方法

<script type="text/javascript">
			var doms = [];
			cityData.forEach(function(province){
				var wrap = [];
				province.children.forEach(function(city){
					wrap.push("<li data="+city.value+">"+city.text+"</li>");
				});
				doms.push("<div class='city' data="+province.value+"><p>"+province.text+"</p><ul>"+wrap.join('')+"</ul></div>");
			});
			document.getElementById('aaaa').innerHTML = doms.join('');
			
			
			$('#aaaa .city p').click(function(){
				alert(1);
			});
	</script>

曲小强

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
左右联动效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=devic...
复制链接

扫一扫