<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>后台左侧菜单</title> <style type="text/css"> *{ margin:0; padding:0} body{ font-family:"宋体"; font-size:12px; } .box{ width:300px; margin-left:100px; margin-top:50px; border-bottom:1px solid #999;} h1{ font-size:12px; border:1px solid #999; background:#eee url(images/leftbar.gif) no-repeat 275px 3px; padding:5px; border-bottom:none; cursor:pointer; } //h1:hover{ background:#090} p{ padding:5px; border-left:1px solid #999; border-right:1px solid #999;} .ed{ background-color:#ccc} .shang{ background-position:275px -30px} </style> <script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ $("p:not(:first)").hide(); $("h1").hover(function(){ $(this).addClass("ed") },function(){ $(this).removeClass("ed") }) $("h1").click(function(){//选择h1标签点击事件 //点击的那个h1标签,紧挨着他的p标签收缩或展开,他的兄弟p标签相反的收缩或展开 $(this).next("p").slideToggle().siblings("p").slideUp(); //点击的那个h1标签,没有的添加,有就删除shang这个class,他的兄弟移除这个class $(this).toggleClass("shang").siblings("h1").removeClass(); })
})
</script> </head>
<body> <div class="box"> <h1 class="shang">标题一</h1> <p>内容</p> <h1>标题一</h1> <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
<h1>标题一</h1> <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p> <h1>标题一</h1> <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p> <h1>标题一</h1> <p>内容</p>
</div>
</body> </html>
|