张经纬的博客 -

$(document).ready(function() {
    $('#wrap ul.unviewable').hide();
    $('#wrap h2').hover(function() {
        $(this).css({
            'cursor': 'pointer',
            'background': '#047'
        });
    },
    function() {
        $(this).css({
            'cursor': 'default',
            'background': '#046'
        });
    })
}) $('#wrap h2').click(function() {
    var id = this.id;
    if ($(this).next().attr('class') != 'viewable') {
        $('#wrap ul.viewable').slideUp('slow',
        function() {
            $(this).attr({
                'class': 'unviewable'
            }).hide();
        });
        $('#' + id).next().slideDown('slow',
        function() {
            $(this).attr({
                'class': 'viewable'
            }).css({
                height: 'auto'
            });
        });
    }
})

ul, li, h2 {
	margin:0;
	padding:0;
}
li {
	list-style:none;
}
#wrap {
	width:300px;
	border:1px solid #000;
	padding:1px;
}
#wrap h2 {
	padding: 2px 10px 3px 10px;
	border: 2px outset #5AA0B8;
	background: #046;
	color: #FFF;
	height: 19px;
	vertical-align: bottom;
	font:14px/1.6 Arial, Helvetica, sans-serif;
}
#wrap ul {
	height:auto;
}
#wrap ul li {/*display:inline;*/
	padding-left:10px;
}
#wrap ul li a {
	font:12px/1.6 Arial, Helvetica, sans-serif;
	text-decoration:none;
}

<ul id="wrap">
  <li>
    <h2 id="arms">武器特色</h2>
    <ul class="viewable">
      <li><a href="#">3</a></li>
      <li><a href="#">大刀</a></li>
      <li><a href="#">长枪</a></li>
      <li><a href="#">弓箭</a></li>
      <li><a href="#">火枪</a></li>
      <li><a href="#">宝剑</a></li>
      <li><a href="#">大刀</a></li>
      <li><a href="#">长枪</a></li>
      <li><a href="#">弓箭</a></li>
      <li><a href="#">火枪</a></li>
    </ul>
  </li>
  <li>
    <h2 id="equip">装备特色</h2>
    <ul class="unviewable">
      <li><a href="#">2</a></li>
      <li><a href="#">大刀</a></li>
      <li><a href="#">长枪</a></li>
      <li><a href="#">弓箭</a></li>
      <li><a href="#">火枪</a></li>
      <li><a href="#">宝剑</a></li>
      <li><a href="#">大刀</a></li>
      <li><a href="#">长枪</a></li>
      <li><a href="#">弓箭</a></li>
      <li><a href="#">火枪</a></li>
      <li><a href="#">宝剑</a></li>
      <li><a href="#">大刀</a></li>
      <li><a href="#">长枪</a></li>
      <li><a href="#">弓箭</a></li>
      <li><a href="#">火枪</a></li>
      <li><a href="#">宝剑</a></li>
      <li><a href="#">大刀</a></li>
      <li><a href="#">长枪</a></li>
      <li><a href="#">弓箭</a></li>
      <li><a href="#">火枪</a></li>
      <li><a href="#">宝剑</a></li>
      <li><a href="#">大刀</a></li>
      <li><a href="#">长枪</a></li>
      <li><a href="#">弓箭</a></li>
      <li><a href="#">火枪</a></li>
      <li><a href="#">宝剑</a></li>
    </ul>
  </li>
  <li>
    <h2 id="other">其他特色</h2>
    <ul class="unviewable">
      <li><a href="#">1</a></li>
      <li><a href="#">大刀</a></li>
      <li><a href="#">长枪</a></li>
      <li><a href="#">弓箭</a></li>
      <li><a href="#">火枪</a></li>
      <li><a href="#">宝剑</a></li>
      <li><a href="#">大刀</a></li>
      <li><a href="#">长枪</a></li>
    </ul>
  </li>
</ul>