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

Answer 2

请在这里使用css 首先声明css

<style>
.toggleDiv{
   display:none;
}
</style>

然后像你这样在你的javascript中更新一行

$('#chatContainer').toggleClass('toggleDiv');

如何使用javascript密钥代码切换div

2 个答案: