jquery - 通过单击将 div 滑入/滑出

Question

我有一个可以根据需要打开和关闭的内容 div，但我无法让内容 div 从底部滑入或滑出。我尝试使用 css 但我认为它的固定位置让我悲伤。默认情况下它应该是隐藏的，但默认情况下它会显示

$(".livechat-button").click(function() {
    $("#newpost").toggle();
});

.livechat-button {
	display: block;
	position: fixed;
	bottom: 0px;
	right: 0px;
	border-top: solid 1px #333333;
	border-left: solid 1px #333333;
	width: 180px;
	height: 50px;
	background-color: rgba(0,0,0,1.00);
	text-align: center;
	padding-top: 15px;
	color: #fff;
	cursor: pointer;
}

.newcontent {
	display: block;
	position: fixed;
	bottom: 0px;
	right: 0px;
	border-top: solid 1px #333333;
	border-left: solid 1px #333333;
	width: 300px;
	height: 450px;
	background-color: rgba(71,227,255,1.00);
	text-align: center;
	font-size: 13px;
	color: #000;
	padding-top: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="newpost" class="newcontent">
    Test Content   
</div>

<div class="livechat-button">Open</div>

Answer 1

使用此工作代码。

$(".livechat-button").click(function() {
    $("#newpost").slideToggle();
});
});

及以下 CSS

.newcontent {
    display: none;  
    position: fixed;
    bottom: 0px;
    right: 0px;
    border-top: solid 1px #333333;
    border-left: solid 1px #333333;
    width: 300px;
    height: 450px;
    background-color: rgba(71,227,255,1.00);
    text-align: center;
    font-size: 13px;
    color: #000;
    padding-top: 5px;
}