jquery实现左侧菜单效果

Posted 2020-10-08 1点

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery实现左侧菜单效果相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>左侧菜单</title>
		<script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
		<script type="text/javascript" src="js/test.js" ></script>
		<style>
			* { padding:0; margin:0; }

body { padding:100px; font:12px "宋体"; }

.box { width:500px; border-bottom:1px solid #CCC; }


.box h1 { height:30px; line-height:30px; padding:0 10px; font-size:12px; cursor:pointer; border:1px solid #ccc; border-bottom:none; background:#3c3c3c url(img/bg.gif) no-repeat right -27px;  color:white}


.box h1.hover { background-color:#9d9d9d; }

.box h1.active { background-position:right 7px; }

.box p { padding:10px; border-left:1px solid #ccc; border-right:1px solid #ccc; }


</style>

		</style>
	</head>
	<body>
		
		<div class="box">
			<h1>标题1</h1>
			<p>Beauty without virtue is a rose without fragrance.无德之美犹如没有香味的玫瑰，徒有其表。</p>
			<h1>标题1</h1>
			<p>well begun,half done.好的开始等于成功的一半。</p>
			<h1>标题1</h1>
			<P>live not to eat,but eat to live.活着不是为了吃饭，吃饭为了活着。</P>
			<h1>标题1</h1>
			<p>It is hard to please all.众口难调。</p>
		</div>
	</body>
</html>

	$(document).ready(function(){
		
		$(\'.box h1:first\').addClass(\'active\');
		
		$(\'.box p:not(:first)\').hide();
		
		
		$(\'.box h1\').hover(function(){
			
		$(this).addClass(\'hover\');
		},function(){

		$(this).removeClass(\'hover\');	

			});
			
		$(\'.box h1\').click(function(){
			
			$(this).next(\'p\').slideToggle().siblings(\'p\').slideUp();	
			
					
			
			$(this).toggleClass(\'active\')
			
					.siblings(\'h1\').removeClass(\'active\');

			});
			
			

			
			
			

		});

　　图片：

效果：

2017-09-25 09:44:24

以上是关于jquery实现左侧菜单效果的主要内容，如果未能解决你的问题，请参考以下文章

12个用得着的 JQuery 代码片段

jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果

SpringMVC+EasyUI实现页面左侧导航菜单

jQuery鼠标悬停3d菜单展开动画

左侧菜单栏折叠展开效果-超级简单

鼠标滑动一定距离的左侧菜单置顶效果

jquery实现左侧菜单 效果

jquery实现左侧菜单效果