用jQuery做的伸缩使列表___晚上她们老乡会，好爽、

《jQuery网页开发实例精解》这本书吧，看完了前四章，发现错误巨多！楼主一怒之下上当当买了一本《锋利的jQuery》。呵呵，还是直奔主题吧。

先看简单的几条css：

<style type="text/css">
    ul{
    list-style: none;
    }
    .menu{
    position: relative;
    width: 300px;
    padding: 0px;
    }
    .content{
    display: none;
    background-color:gray;
    border: 1px solid #ddd;
    width: 300px;
    padding: 5px;
    margin: 0px;
    }
    .content li{
    padding: 5px 0;
    border-bottom: 1px dotted #ddd;
    }

再看html的body部分：

<ul class="menu">
<li id="item1">jQuery特点<br>
<ul class="content" id="item1_list">
<li>jQuery是一个javascript库。</li>
<li>jQuery极大地简化了javascript编程。</li>
<li>jQuery很容易编程。</li>
<li>jQuery拥有供AJAX开发的丰富的函数(方法)库。</li>
</ul>
</li>
</ul>

下面是关键的jQuery代码，其实就是用以前说到过的hover()啊，slideUp()啊，slideDown()啊，就可以了，比较简单，看看就能看懂。

我的结构可能不太好，请大家多多指教哈。

$(document).ready(function(){
//   alert("sb");
  $("#item1").hover(function(){
//   alert("down");
  $("#item1_list").slideDown(200);
  },function(){
//   alert("up");
  $("#item1_list").slideUp(200);
  });
  });

效果图如下：