JavaScript 上拉菜单

Question

在我的网站底部，我将有一个用于即时聊天的上拉菜单部分。我正在使用 Javascript 来拉出菜单。

我有一个 ID 为“chatTab”的选项卡，实际的聊天消息位于 ID“chat”中。聊天选项卡位于页面底部，直到您单击它，然后它会与聊天一起拉出。问题是，它拉不起来。我已经在我的选项卡分区中使用了 onClick 方法，并确认它有效，所以问题出在 JS 的某个地方。

var current;
var pullChat = 0;
var pullMenu = function() {
    if(pullChat === 0) {
        current = document.getElementById('chatTab');
        current.style.bottom = '300';
        alert('pie');
        current = document.getElementById('chat');
        current.style.bottom = '0'; //starts at -300
    }
}

警报消息是我用来测试一行代码是否运行的东西，在这种情况下它确实运行。

我的 HTML 很长，但有两件事很重要:

<div id='chatTab' onClick='pullMenu()'>Instant Chat</div>
<div id='chat'></div>

以下是重要项目的 CSS:

#chatTab {
    z-index:1000;
    position:fixed;
    bottom:0;
    background-color:#FF9933;
    color:white;
    width:100%;
    margin:0;
    padding:0;
    text-align:center;
    font-size:1.8em;
}
#chatTab:hover {
    cursor:pointer;
}
#chat {
    z-index:1001;
    position:fixed;
    padding:0;
    margin:0;
    bottom:-300px;
    height:300px;
}

Answer 1

CSS bottom 属性需要一个长度值。 300 不是长度。它不是 0 并且没有单位。

您可能指的是'300px'。