Question

我正在制作一个简单的php聊天框，我首先使用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 我在.chatcontainer上有display: hidden;，我想使用javascript在点击.chatheader时显示。提前感谢任何可以提供帮助的人！

Answer 1

您可以使用 .slideToggle() ：

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

<强> Updated Fiddle

最终代码应如下所示：

<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()隐藏它。

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

2 个答案: