JAVASCRIPT：在单击其他类后使类可见

我正在制作一个简单的php聊天盒，首先从css/javascript开始。我想做的是，当我点击聊天的标题时，聊天的主要部分将向上滑动并显示，当我再次点击标题时，它将向下滑动，类似于Facebook聊天。我试过类似的方法

$(".chatheader").on("click", function () {
    $(".chatcontainer").style.display = 'visible';
}

但它们都不起作用，这是我的密码

HTML

我有

显示：隐藏 您可以使用：

$(".chatheader").on("click", function () {
    $("#chatcontainer").slideToggle();
});



最终代码应如下所示：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
    $(".chatheader").on("click", function () {
        $("#chatcontainer").slideToggle();
    });
});
</script>


$（函数（）{
$（“.chatheader”）。在（“单击”，函数（）{
$（“#聊天容器”）.slideToggle（）；
});
});
您可以使用：

$(".chatheader").on("click", function () {
    $("#chatcontainer").slideToggle();
});



最终代码应如下所示：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
    $(".chatheader").on("click", function () {
        $("#chatcontainer").slideToggle();
    });
});
</script>


$（函数（）{
$（“.chatheader”）。在（“单击”，函数（）{
$（“#聊天容器”）.slideToggle（）；
});
});
使用jQuery
slideDown（）方法：

$(".chatcontainer").slideDown();

然后使用
slideUp（）
隐藏它。
使用jQuery
slideDown（）方法：

$(".chatcontainer").slideDown();

然后使用
slideUp（）
隐藏它。
当我在JSFIDLE上测试它时，它会工作，但在我的pc上运行它时不会工作。我的脚本中是否需要包含Jquery才能工作？是的，您需要包含Jquery并将代码放入DOM就绪处理程序中。请检查我的更新代码。非常好的示例。。我不知道slideToggle（）是最新的jquery功能吗@菲利克斯顺便说一句+1@EhsanSajjad不，正如您在文档中看到的，这个方法是从版本
1.0
添加的。当我在JSFIDLE上测试它时，它会工作，但在我的pc上运行它时，它不会工作。我是否需要在脚本中包含Jquery才能工作？是的，您需要包含Jquery，并将代码放入DOM就绪处理程序中。请检查我的更新代码。非常好的示例。。我不知道slideToggle（）是最新的jquery功能吗@菲利克斯顺便说一句+1@EhsanSajjad否，此方法是从文档中可以看到的版本
1.0
中添加的。