手写超简单的JQuery滑动导航

2592
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>

写的不好请各位大神勿喷!可以提出你们的建议!!谢谢