基于jQuery的一个提示功能的实现

时间：2023-03-08 20:00:14

最近有点忙，没有时间更新自己的博客，只能说我在原地踏步了，不知道你们进步了没有？

今天给大家分享一个提示的实现，有点简单，适合小白同学学习。下面是效果图

基于jQuery的一个提示功能的实现

提示的功能：

当鼠标进入“我的菜单”的子菜单时，实现折叠功能，实现下面的效果

基于jQuery的一个提示功能的实现

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		html,body{

			height:100%;

			width:100%;

			font-family:'Microsoft Yahei';

			font-size:16px;

			overflow:hidden;

		}

		.sidebar{

			width:20%;

			height:100%;

			float:left;

			position:relative;

		}

		.content-wrap{

			width:100%;

			height:100%;

			background:#666;

			overflow:hidden;

		}

		.menus-title{

			color:#333;

			text-align:left;

			font-size:24px;

			font-weight:700;

			padding-left:15px;

		}

		.menus-list{

			list-style: none;

			padding:15px;

			height:100%;

			overflow-y:auto;

			background:#f5f5f5;

		}

		.menus-list li{

			line-height: 35px;

			height:35px;

			border-top:1px solid #fff;

			border-bottom:1px solid #fff;

			text-align:left;

			padding-left:15px;

			overflow:hidden;

		}

		.menus-list li a{

			text-decoration: none;

			color:#000;

		}

		.content-wrap ul li:hover{

			background:#f53;

		}

		.menus-list li:hover a{

			color:white;

			font-weight: 600;

		}

		.suggest{

			position:absolute;

			left: 130px;

			top:-100px;

			background:skyblue;

			color:#fff;

			display:block;

			padding-left:15px;

			line-height: 35px;

			width:100%;

		}

		.suggest:after {

			content:'';

			position:absolute;

			top:14px;

			left:-32px;

			border-left:16px solid transparent;

			border-right:16px solid skyblue;

			border-top:16px solid transparent;

		}

		.suggest a{

			color:#333;

			text-decoration: none;

		}

		.content{

			width:80%;

			height:100%;

			background:#3ff;

			float:left;

		}

	</style>

	<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

	<div class="sidebar">

		<div class="content-wrap">

			<h1  class="menus-title">我的菜单</h1>

			<ul class="menus-list">

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的苹果</a></li>

				<li><a href="">1412</a></li>

				<li><a href="">53145</a></li>

				<li><a href="">43124</a></li>

				<li><a href="">我的4231421菜单</a></li>

				<li><a href="">我的4124菜单</a></li>

				<li><a href="">我的23单</a></li>

				<li><a href="">我的单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

				<li><a href="">我的菜单</a></li>

			</ul>

		</div>

		<div class="suggest"></div>

	</div>

	<div class="content"></div>

	<script>

		$(document).ready(function(){

		  $(".content-wrap ul li").mouseenter(function(){

		    if($('.sidebar').width() == 154){

		    	var top = $(this).offset().top-45;

		    	var left = $(this).offset().left+145;

		    	var suggestMessage = $(this).html()

		    	$('.suggest').css({top:top,left:left}).html(suggestMessage).show();

		    }

		  }).mouseleave(function(){

		  	$('.suggest').hide();

		  });

		  $('.menus-title').click(function(){

		  	console.log($('.sidebar').width());

		  	if($('.sidebar').width() == 384){

		  		$('.sidebar').width('8%');

		  		$('.content').width('92%');

		  		console.log($('.sidebar').width());

		  	}else{

				$('.sidebar').width('20%');

				$('.content').width('80%');

		  	}

		  })

		});

	</script>

</body>

</html>

　　

相关文章