如何在按下鍵時顯示元素，然后再次按下該鍵隱藏元素？

Question

我在這個項目中有一個側面菜單，可以使用[Ctrl] + [Z]進行切換。 我希望它在下次按下[Ctrl] + [Z]模式時隱藏。 我對JavaScript的一般了解阻礙了我使用Google對其進行短語設置，因此我最終沒有找到任何東西，因此我來了。 有了JavaScript的數量，我知道這在技術上應該可以，但是從邏輯 上講是不可行的。 有任何想法嗎？ 這是我的代碼：

var letter = {
    z: 90
    ...

};

$(document).ready(function() {

    $("body").keydown(function(event) {

            // toggles element the first time
        if(event.ctrlKey && event.which === letter.z) {
            $("[data-location='top']").slideDown("fast");
            $("[data-location='bottom']").slideDown("fast");
        }

            // hides element the second time
        if(event.ctrlKey && event.which === letter.z) {
            $("[data-location='top']").slideUp("fast");
            $("[data-location='bottom']").slideUp("fast");
        }

    });

});

任何幫助將不勝感激！ :-)

Answer 1

您正在尋找.slideToggle（）函數。

var letter = {
    z: 90
    ...

};

    $(document).ready(function() {

        $("body").keydown(function(event) {

            if(event.ctrlKey && event.which === letter.z) {
                $("[data-location='top']").slideToggle("fast");
                $("[data-location='bottom']").slideToggle("fast");
            }

        });

    });

Answer 2

JavaScript：

var letter = {
    z: 90

};

$(document).ready(function() {
var visible = false;
    $("body").keydown(function(event) {

            // toggles element the first time
        if(!visible && event.ctrlKey && event.which === letter.z) {
            visible = true;
            $("[data-location='top']").slideDown("fast");
            $("[data-location='bottom']").slideDown("fast");
        } else if(visible && event.ctrlKey && event.which === letter.z) {
            visible = false;
            $("[data-location='top']").slideUp("fast");
            $("[data-location='bottom']").slideUp("fast");
        }


    });

});​

HTML：

<div id="top" class="hidden" data-location="top"></div>
<div id="bottom" class="hidden" data-location="bottom"></div>​

CSS：

#top {height:100px;width:500px;background-color:red;}
#bottom {height:100px;width:500px;background-color:blue;}
.hidden {display:none;}

小提琴

Answer 3

您只需將一次綁定到keydown，然后在其中進行邏輯處理即可。 這樣您的代碼將變為：

var letter = {
    z: 90
    ...

};

$(document).ready(function() {

    $("body").keydown(function(event) {

            // toggles element the first time
        if(event.ctrlKey && event.which === letter.z) {
            $("[data-location='top']").toggle("fast");
            $("[data-location='bottom']").toggle("fast");
        }

    });

});