JAVASCRIPT: сделать класс видимым после нажатия на другой класс

0

Я делаю простой 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. Заранее благодарю всех, кто может помочь!

2 ответа

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>
  • 0
    Он работает, когда я тестирую его на JsFiddle, но не при его запуске на моем компьютере. Нужно ли включать Jquery в мой скрипт, чтобы он работал?
  • 0
    Да, вам нужно включить jQuery, а также поместить свой код в обработчик DOM ready. Пожалуйста, проверьте мой обновленный код.
Показать ещё 3 комментария
2

Используйте метод slideDown() jQuery:

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

И используйте slideUp() чтобы скрыть его позже.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню