jQuery slideDown slideUp 怎么用啊

各位高手现在做Web 时遇到这样一个奇怪的问题，slideDown 的显示时不是慢慢下滑而是一下子全都显示出来了，代码如下：
用的是1.3.2，还有就是现在没有分，以前下东西全用完了请大家帮忙看一下了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("#menu dd:not(:first)").hide();
            $("#menu dt").click(function() {
                $("#menu dd:visible").slideUp("slow");
                $(this).next().slideDown("slow");
                //$(this).next().children().slideDown("slow");alert($(this).next().children().html());
            });
            $("#btn1").click(function() { $("#ooo").slideUp("slow") });
            //alert($("#ooo").html());
            $("#btn2").click(function() { $("#ooo").slideDown("slow"); })
        })
    </script>
    <style type="text/css">
    dl
{
    width:300px;
    height:auto;
    background-color:Fuchsia;
    color:Lime;
    font-size:15px;
    border-style:dotted;
    border: dotted 1px Maroon;
}
dl dt
{
    height:25px;
    line-height:25px;
    vertical-align:middle;
    border-bottom: solid 1px White;
}
ul
{
    text-decoration:none;
    color:MenuText;
    background-color:Olive;
    font-size:13px;
    position:relative;
    margin: 0;
    left:-38px;
    top: 0px;
    width: 293px;
    height:auto;
}
ul li
{
    text-decoration:none;
    height:24px;
    line-height:24px;
    vertical-align:middle;
    border-bottom:solid 1px White;
}
</style>
    
    <title></title>
</head>
<body>
<dl id = "menu">
<dt>人事管理</dt>
<dd><ul><li>信息一</li>
<li>信息二</li>
<li>信息三</li></ul></dd>
<dt>信息四</dt>
<dd><ul><li>物品管理</li>
<li>物品一</li>
<li>物品二</li>
<li>物品三</li>    
<li>物品四</li>
<li>物品五</li></ul></dd>
<dt>物品六</dt>
<dd><ul><li>文档管理</li>
<li>文档一</li>
<li>文档二</li></ul></dd></dl><dl>
<dt>物品管理</dt>
<dd>
<ul id="ooo"><li>物品一</li><li>物品二</li><li>物品三</li><li>物品四</li><li>物品五</li></ul></dd>
<dt>文档管理</dt>
<dd><ul><li>文档一</li><li>文档二</li></ul></dd>
</dl>
<input type="button" value="Up" id="btn1"/>
<input type="button" value="Down" id="btn2"/>
</body>
</html>

解决方案 »

  1.   

    参考：
    http://jqueryui.com/demos/slider/#range-vertical
      

  2.   

    去看《jQuery in action》
      

  3.   

    考下来在本地调试过了，有慢慢下来的效果。你如果嫌不够慢的话，slideDown是可以直接在后面加时间参数的。类似slideDown(50000),会比slow还要slow.也有可能是你用的库的问题造成你看不到效果。
      

  4.   

    样式问题
    请查一下postion:relative<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="jquery.js" type="text/javascript"> </script>     <script type="text/javascript" language="javascript"> 
            $(document).ready(function() { 
                $("#menu dd:not(:first)").hide(); 
                $("#menu dt").click(function() {
                    $("#menu dd:visible").slideUp("slow");
    $(this).next().slideDown("slow");
                    //$(this).next().children().slideDown("slow");alert($(this).next().children().html()); 
                }); 
                $("#btn1").click(function() { $("#ooo").slideUp("slow") }); 
                //alert($("#ooo").html()); 
                $("#btn2").click(function() { $("#ooo").slideDown("slow"); }) 
            }) 
        </script> 
        <style type="text/css"> 
        dl 
    { 
        width:300px; 
        height:auto; 
        background-color:Fuchsia; 
        color:Lime; 
        font-size:15px; 
        border-style:dotted; 
        border: dotted 1px Maroon; 
    } 
    dl dt 
    { 
        height:25px; 
        line-height:25px; 
        vertical-align:middle; 
        border-bottom: solid 1px White; 
    }
    dl dd{
    display:block;
    margin:0;
    padding:0
    }
    ul 
    { 
        text-decoration:none; 
        color:MenuText; 
        background-color:Olive; 
        font-size:13px; 
        margin: 0; 
        left:-38px; 
        top: 0px; 
        width: 293px; 
        height:auto; 
    } 
    ul li 
    { 
        text-decoration:none; 
        height:24px; 
        line-height:24px; 
        vertical-align:middle; 
        border-bottom:solid 1px White; 
    } 
    </style> 
        
        <title> </title> 
    </head> 
    <body> 
    <dl id = "menu"> 
      <dt>人事管理 </dt> 
      <dd>
        <ul>
          <li>信息一 </li> 
          <li>信息二 </li> 
          <li>信息三 </li> 
        </ul>
       </dd> 
      <dt>信息四 </dt> 
      <dd>
        <ul>
          <li>物品管理 </li> 
          <li>物品一 </li> 
          <li>物品二 </li> 
          <li>物品三 </li>    
          <li>物品四 </li> 
          <li>物品五 </li>
        </ul>
      </dd> 
      <dt>物品六</dt> 
      <dd>
        <ul>
          <li>文档管理</li> 
          <li>文档一 </li> 
          <li>文档二 </li> 
        </ul>
      </dd>
    </dl> <dl> 
    <dt>物品管理 </dt> 
    <dd> 
    <ul id="ooo"> <li>物品一 </li> <li>物品二 </li> <li>物品三 </li> <li>物品四 </li> <li>物品五 </li> </ul> </dd> 
    <dt>文档管理 </dt> 
    <dd> <ul> <li>文档一 </li> <li>文档二 </li> </ul> </dd> 
    </dl> 
    <input type="button" value="Up" id="btn1"/> 
    <input type="button" value="Down" id="btn2"/> 
    </body> 
    </html> 
    修改的CSS
    dl dd{
    display:block;
    margin:0;
    padding:0
    }
    ul 
    { 
        text-decoration:none; 
        color:MenuText; 
        background-color:Olive; 
        font-size:13px; 
        margin: 0; 
        left:-38px; 
        top: 0px; 
        width: 293px; 
        height:auto; 
    } 
      

  5.   

    谢谢jamix的帮助，呵呵，我找到了.偶结贴了！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>    <script type="text/javascript" language="javascript">
            $(document).ready(function() {
                $("#menu dd:not(:first)").hide();
                $("#menu dt").click(function() {
                    $("#menu dd:visible").slideUp("slow");
                    $(this).next().slideDown("slow");
                    //$(this).next().children().slideDown("slow");alert($(this).next().children().html());
                });
                $("#btn1").click(function() { $("#ooo").slideUp("slow") });
                //alert($("#ooo").html());
                $("#btn2").click(function() { $("#ooo").slideDown("slow"); })
            })
        </script>
        <style type="text/css">
        dl
    {
        width:300px;
        height:auto;
        background-color:Fuchsia;
        color:Lime;
        font-size:15px;
        border-style:dotted;
        border: dotted 1px Maroon;
    }
    dl dt
    {
        height:25px;
        line-height:25px;
        vertical-align:middle;
        border-bottom: solid 1px White;
    }
    dl dd
    {
        margin:0;
    }
    ul
    {
        text-decoration:none;
        color:MenuText;
        background-color:Olive;
        font-size:13px;
        width: 293px;
        margin:0;
        height:auto;
    }
    ul li
    {
        text-decoration:none;
        height:24px;
        line-height:24px;
        vertical-align:middle;
        border-bottom:solid 1px White;
    }
    </style>
        
        <title></title>
    </head>
    <body>
    <dl id = "menu">
    <dt>人事管理</dt>
    <dd><ul><li>信息一</li>
    <li>信息二</li>
    <li>信息三</li></ul></dd>
    <dt>信息四</dt>
    <dd><ul><li>物品管理</li>
    <li>物品一</li>
    <li>物品二</li>
    <li>物品三</li>    
    <li>物品四</li>
    <li>物品五</li></ul></dd>
    <dt>物品六</dt>
    <dd><ul><li>文档管理</li>
    <li>文档一</li>
    <li>文档二</li></ul></dd></dl><dl>
    <dt>物品管理</dt>
    <dd>
    <ul id="ooo"><li>物品一</li><li>物品二</li><li>物品三</li><li>物品四</li><li>物品五</li></ul></dd>
    <dt>文档管理</dt>
    <dd><ul><li>文档一</li><li>文档二</li></ul></dd>
    </dl>
    <input type="button" value="Up" id="btn1"/>
    <input type="button" value="Down" id="btn2"/>
    </body>
    </html>