javascript - 它不允许我使用 css 设计我的 <div>

Question

我已经开始了一个编码元素，但是当我尝试设置我的 div 样式时遇到了麻烦，这是我目前的代码。

除 .chat 规则外，以下所有 CSS 规则均适用。

我做错了什么？

var main = function() {
    $('.the-icon-menu').click(function() {
        $('.menu').animate({
            left: "0px"
        }, 200);
        $('body').animate({
            left: "300px"
        }, 200);
    });
    $('.the-icon-close').click(function() {
        $('.menu').animate({
            left: "-300px"
        }, 200);
        $('body').animate({
            left: "0px"
        }, 200);
    });
};
$(document).ready(main);

body {
    left: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
    background-color: #000000;
}
.menu {
    background-color: #FF0000;
    left: -300px;
    height: 100%;
    position: fixed;
    width: 300px;
}
.menu ul {
    border-top: 2px dotted #CE9429;
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu li {
    border-bottom: 2px dotted #CE9429;
    line-height: 45px;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-top: 3px;
}
.menu a {
    color: #CE9429;
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
}
.the-icon-close {
    cursor: pointer;
    padding-left: 10px;
    padding-top: 10px;
}
.the-icon-menu {
    background-color: #FF0000;
    cursor: pointer;
    width: 10px;
    height: 10000px;
}
.chat {
    background-color: #FF0000;
    left: 300px;
    height: 100px;
    position: fixed;
    width: 300px;
}

<div class="menu">
    <div class="the-icon-close">
        <img src="close.png" />
    </div>
    <ul>
        <li><a href="#">Games</a></li>
        <li><a href="#">History of computer games</a></li>
        <li><a href="#">Coding</a></li>
        <li><a href="#">Help forums</a></li>
    </ul>
</div>
<div class="the-icon-menu">
</div>
<div class="the-chat-menu">
    hi
</div>
<div class="chat">
    <div class="the-chat-close">
    </div>
    <form>
        <input type="text" />
        <input type="submit" value="Submit" />
    </form>
</div>

Answer 1

您只需要设置顶部或底部位置，例如top: 0; 在 .chat div 上。

JSFiddle

给聊天 div 一个顶部/底部位置，您应该会看到它出现。