Javascript 为什么slideToggle会向下移动并离开屏幕？

我正在编写一些代码来切换

div

类。我想向下滑动

div

到页面底部，再次单击时向上滑动

我的HTML代码包含：

<div class="chat-sidebar">

    <div class="chat_head"> 
      <h4 align="center"><b>Online Users</b></h4> 
    </div>

    <div class="chat_body"> 
        <div class="sidebar-name" ></div> 
    </div>

</div>

现在，我正在使用jQuery函数滑动主

聊天侧边栏
DIV，如下所示：

$(document).ready(function() {

    $('.chat_head').click(function(){
        $('.chat-sidebar').slideToggle('slow');
    });


});

单击
.chat\u head
div时，滑动切换功能正常工作。但是它下降得太远，以至于不再可见（在屏幕外）。我在这里遗漏了什么？
您需要滑动切换
.chat\u body
而不是整个包装器div。因此只需从
中删除
高度
。chat侧边栏
并将其移动到
。chat\u body
。现在在
上应用
slideToggle（）
函数


$（文档）.ready（函数（）{
$（'.chat_head'）。单击（函数（）{
$（'.chat_body'）。滑动切换（'slow'）；
});
});
。聊天侧边栏{
宽度：200px；
位置：固定；
右：10px；
底部：0px！重要；
填充顶部：10px；
垫底：10px；
边框：1px实心rgba（29,49,91,3）；
边界半径：5px 5px 0px 0px；
}
.侧边栏名称{
左侧填充：10px；
右边填充：10px；
页边顶部：1px；
字体大小：20px；
}
.聊天室主任{
背景：#f39c12；
颜色：白色；
填充：2px；
字体大小：粗体；
光标：指针；
边界半径：5px 5px 0px 0px；
利润上限：-10px；
}
.聊天室{
高度：120px；
}

在线用户
试试这个：


$（文档）.ready（函数（）{
$（“.head”）。在（“单击”，函数（）{
$（“.chat侧边栏”）.slideToggle（“慢”）；
})
})
.wrapper{
边框：1px纯色灰色；
宽度：200px；
位置：固定；
右：10px；
底部：0；
最小高度：50px；
边界半径：3px 3px 0px 0px；
}
.头{
背景：#f39c12；
颜色：白色；
字体大小：粗体；
光标：指针；
位置：绝对位置；
宽度：200px；
高度：50px；
边界半径：5px 5px 0px 0px；
}
.聊天侧边栏{
背景色：#fff；
高度：200px；
}


在线用户

$(document).ready(function() {

    $('.chat_head').click(function(){
        $('.chat-sidebar').slideToggle('slow');
    });


});