Css代码部分: * { padding:0; margin:0; } body { padding:100px; font:12px "宋体"; } .table-xuan { width:500px; border-bottom:1px solid #CCC; } .table-xuan h1 { height:30px; line-height:30px; padding:0 10px; font-size:12px; cursor:pointer; border:1px solid #ccc; border-bottom:none; background:#eee url(img/bg.gif) no-repeat right -27px; } .table-xuan h1:hover{background-color:#e3e2e2;} .table-xuan h1.active { background-position:right 7px; } .table-xuan p { padding:10px; border-left:1px solid #ccc; border-right:1px solid #ccc; }
HTML代码部分: <div class="table-xuan"> <h1>标题一</h1> <p>玄玄 博客</p> <h1>标题二</h1> <p>玄玄 博客</p> <h1>标题三</h1> <p>玄玄 博客</p> <h1>标题四</h1> <p>玄玄 博客</p> <h1>标题五</h1> <p>玄玄 博客</p> </div>
JQuery代码部分: <script type="text/javascript"> $(document).ready(function(){ //第一个标题样式展开 $('.table-xuan h1:first').addClass('active'); //不是第一个内容 默认隐藏 $('.table-xuan p:not(:first)').hide(); //点击事件 $('.table-xuan h1').click(function(){ //$(this)显示 兄弟元素隐藏 $(this).next('p').slideToggle() .siblings('p').slideUp(); //$(this) 标题变换图标 其它默认 $(this).toggleClass('active') .siblings('h1').removeClass('active'); }); //移入事件 // $('.table-xuan h1').hover(function(){ // //$(this)显示 兄弟元素隐藏 // $(this).next('p').stop(true,true).slideToggle() // .siblings('p').slideUp(); // //$(this) 标题变换图标 其它默认 // $(this).toggleClass('active') // .siblings('h1').removeClass('active'); // }); }); </script>
写的不好请各位大神勿喷!可以提出你们的建议!!谢谢