鼠标悬浮根据一级导航栏生成二级导航点击将值放入input

最新推荐文章于 2022-10-17 15:41:24 发布

韦裤布被

最新推荐文章于 2022-10-17 15:41:24 发布

阅读量444

点赞数

分类专栏：前端文章标签： JQuery html5

本文链接：https://blog.csdn.net/qq_42826164/article/details/89505254

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

项目需求: 鼠标悬浮获取二级区域,点击二级将一级和二级的值获取放入input域中
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>级联导航</title>
	</head>
	<style type="text/css">
		*{margin: 0px;padding: 0px;height: 0px;list-style: none;text-decoration: none;}
		.area_school{
			overflow: auto;
			position: relative;
			width: 305px;
			height: 300px;
			padding: 50px;
			margin: 50px auto;
			background: rgba(244, 247, 252, 1);
		}
		.area-input{
			width: 300px;
			height: 35px;
			background: #FFFFFF;
			border: 1px solid #b7b0b0;
			border-radius: 2px;position: absolute;
		}
		#school{
			width: 250px;
			height:25px;
			font-size: 18px;
			border: none;
			padding:4px 10px;
			outline: none;
		}
		.stair{
			position: absolute;
			width: 150px;
			height: 200px;
			border: 1px solid #9999992e;
			border-radius: 2px;
			top: 87px;
			background: #FFFFFF;
			text-align: center;
			overflow: auto;
			display: none;
		}
		li{
			height: 35px;
			line-height: 35px;
			border-bottom: 1px solid #99999945;
			color:#999999;
			cursor: pointer;
		}
		.second{
			position: absolute;
			width: 146px;
			height: 200px;
			border: 1px solid #9999992e;
			border-radius: 2px;
			top: 87px;
			background: #FFFFFF;
			text-align: center;
			overflow: auto;
			left: 204px;
			display:none;
		}
		.second>li:hover{
			background: #9999991f;
		}
		.stair>li:hover{
			background: #9999991f;
		}
		
	</style>
	<body>
		
		
			<div class="area_school">
				<div class="area-input">
					<input type="text" name="school" id="school" value="" placeholder="区域选择" />
					<!--<i class="layui-edge" style="cursor: pointer;border-top-color: #c2c2c2;"></i> 预留扩展图标 30px-->
				</div>
				<div>
				<ul class="stair">
					<li>一级导航01</li>
					<li>一级导航02</li>
					<li>一级导航03</li>
					<li>一级导航04</li>
					<li>一级导航05</li>
					<li>一级导航06</li>
					<li>一级导航07</li>
					<li>一级导航08</li>
					<li>一级导航09</li>
					<li>一级导航10</li>
					<li>一级导航11</li>
					
				</ul>
				<ul class="second">
				</ul>
				</div>
			</div>
	</body>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#school").focus(function(){
				$(".stair").show();
				$(".stair>li").mouseover(function(){
					$(".second").show();
					
					var stairText = $(this).text();
					$(this).css("background","#9999991f").siblings().css("background","#FFFFFF");
					$(".second").text("");
					for(var i=0;i<10;i++){
						var li = $("<li></li>")
						li.text("二级导航"+i);
						li.appendTo(".second");
					}
					
					$(".second>li").click(function(){
						var secondText = $(this).text();
						$("#school").val(stairText+secondText);
						$(".stair").hide();
						$(".second").hide();
					})
					
					$(".area_school").mouseleave(function(){
						$(".stair").hide();
						$(".second").hide();
						$("#school").blur();
					})
					
				})
			})
			
		})

		
		
	</script>
</html>

虽然简单,但是写也要点时间,拿来即用!(样式可以自调)
简单记录一下!