Я делаю простой 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. Заранее благодарю всех, кто может помочь!
Вы можете использовать .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>
Используйте метод slideDown()
jQuery:
$(".chatcontainer").slideDown();
И используйте slideUp()
чтобы скрыть его позже.