javascript - 如何使用javascript键码切换div

Question

我想使用键码切换一个 div。我以前做过，但出于某种原因，它不再适合我了。有人可以帮忙吗？

HTML:

<div id="leftbottom" class="flex-container">
        <div id="chatcontainer" style="display:none; flex-direction:column">
            <div id="chatmessages">
            </div>

            <div id="chatenter" class="guielem guibutton">
                <div><img src="assets/chat-bubble.svg" style="width:20px; margin-left: 5px;margin-right:5px;"></div>
                <div>Press Enter to chat</div>
            </div>
            <div id="chatinputcontainer" class="guielem" style="display:none">
                <form id="chatinputform">
                    <input id="chatinput" autocomplete="off" type="text" placeholder="message" maxlength="90">
                </form>
            </div>
        </div>            
    </div>

我想要切换的 div:

<div id="chatcontainer" style="display:none; flex-direction:column">

我之前尝试过的(以前可以但现在不起作用):

    document.addEventListener('keydown', function (e) {
    if (ws) {
        switch (e.keyCode) {

            // P
            case 80:
                e.stopPropagation();
                $('#chatContainer').toggle();
                break;
        }
    }
}, true);

我想要得到的结果是:

By default chatContainer is displayed
press P chatContainer is not displayed
press P chatContainer is displayed
press P chatContainer is not display
(Basically press P to show and hide the id)

Answer 1

您的选择器有错别字。替换:

<div id="chatcontainer" style="display:none; flex-direction:column">

与:

<div id="chatContainer" style="display:none; flex-direction:column">

chatcontainer != chatContainer