JAVASCRIPT：在单击其他班级后使班级可见

Question

我正在制作一个简单的php chatbox，并首先从CSS / JavaScript开始。 我想做的是，当我单击聊天标题时，聊天的主要部分将向上滑动并显示，而当我再次单击标题时，它将下降，类似于Facebook聊天。 我已经尝试过类似的东西

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

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

的HTML

<div id="chatbox">
        <div class="chatheader"><div class="chatheadertext">chatboxheader</div></div>
        <div class="chatcontainer">
            test
        </div>
    </div>

的CSS

#chatbox {
    right: 0;
    bottom: 0;
    position: absolute;
    padding-right: 50px;
}
.chatcontainer {
    height: 360px;
    width: 320px;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    float: right;
    top: 100%;
    display: none;
}
.chatheader {
    font-family:'PT Sans';
    background: #00b4ff;
    width: 322px;
    height: 51px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    bottom: 360;
}
.chatheadertext {
    padding-top: 15px;
    padding-left: 15px;
    color: #fff;
}

DEMO我有display: hidden; 在我的.chatcontainer上，并且我想使用javascript在单击.chatheader时使显示可见。 在此先感谢任何可以提供帮助的人！

Answer 1

您可以使用.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>

Answer 2

使用jQuery slideDown()方法：

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

并使用slideUp()稍后将其隐藏。