我正在制作一个简单的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时使显示可见。 在此先感谢任何可以提供帮助的人!

===============>>#1 票数:4 已采纳

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

===============>>#2 票数:2

使用jQuery slideDown()方法:

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

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

  ask by blackhawk338 translate from so

未解决问题?本站智能推荐: