html
<!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>js
$(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实现左侧菜单 效果
原文地址：http://www.cnblogs.com/guangzhou11/p/7590513.html