1

我有这个项目，我有一个侧面菜单，可以使用 [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");
        }

    });

});

任何帮助将不胜感激！:-)

4

3 回答 3

3

.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");
            }

        });

    });
于 2012-12-08T23:12:52.793 回答
3

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;}

小提琴

于 2012-12-08T23:16:01.407 回答
1

你只需要绑定一次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");
        }

    });

});
于 2012-12-08T23:13:55.990 回答