Question

我正在尝试执行/交替两个功能在键盘上按两次相同的键，但在第一次keydown后我没有得到任何其他功能。我需要在第一次按下按键时打开框，而第二次按下按键时应该关闭。

我需要实现这个目标：

第一个框 - ＆gt; F1键（打开/关闭）;

第二个框 - ＆gt; F2键（打开/关闭）;

第三个框 - ＆gt; F3键（打开/关闭）;

开启/关闭操作仅用于解释目的，它实际上将执行的是function()

这是我的代码（我从here获得了jquery）

<div class="time one">
<p>You can see this if you click F1</p>
</div>

<div class="time two">
<p>You can see this if you click F2</p>
</div>

<div class="time three">
<p>You can see this if you click F3</p>
</div>


$(document).keydown(function(e) {
    switch(e.which) {

    case 112: // F1 on keyboard

    function a(el){
        $(el).animate({width: "260px"}, 1500); 
    }
    function b(el){
        $(el).animate({width: "30px"}, 1500);
    }
    var el = $('.one');
    return (el.tog^=1) ? a(el) : b(el);
    break;
    case 113: // F2 on keyboard

    function a(el){
        $(el).animate({width: "260px"}, 1500); 
    }
    function b(el){
        $(el).animate({width: "30px"}, 1500);
    }
    var el = $('.two');
    return (el.tog^=1) ? a(el) : b(el);
    break;
    case 114: // F3 on keyboard

    function a(el){
        $(el).animate({width: "260px"}, 1500); 
    }
    function b(el){
        $(el).animate({width: "30px"}, 1500);
    }
    var el = $('.three');
    return (el.tog^=1) ? a(el) : b(el);
    break;

    default: return; // exit this handler for other keys
    }
  e.preventDefault(); // prevent the default action
});

当我第一次按F1时，但是没有其他事情发生。有人可以帮忙吗？ JSFiddle is here

Answer 1

一种可能的解决方案 http://jsfiddle.net/ex3gckhk/12/

$(function(){
    var F1 = 112;
    var F2 = 113;
    
    function toggleWidth ($element) {
        if ($element.hasClass('extended')) {
            $element.animate({width: "30px"}, 1500);
            $element.removeClass('extended');
        } else {
            $element.animate({width: "260px"}, 1500);
            $element.addClass('extended');
        }
    }
    
    $(document).keyup(function(e) {
        e.preventDefault();
        
        var $element = null;
        
        switch (e.which) {
            case F1: $element = $('.one');
                break;
            case F2: $element = $('.two');
                break;
            default: break;
        }
        
        if ($element) {
            toggleWidth($element);
        }
    });
});

<div class="time one">
    <p>You can see this if you click</p>
</div>
  
<div class="time two">
    <p>You can see this if you click</p>
</div>
 
<div class="time three">
    <p>You can see this if you click</p>
</div>

Answer 2

您的代码始终执行函数a，因为每次按下键都会重新声明变量el，因此（el.tog ^ = 1）将始终为相同的值。

您需要在keydown事件之外声明el变量：

    var el = $('.one');
    $(document).keyup(function(e) {
        switch(e.which) {

            case 13: // F1 on keyboard
                function a(el){
                    $(el).animate({width: "260px"}, 1500);
                }
                function b(el){
                    $(el).animate({width: "30px"}, 1500);
                }
                var rez = (el.tog^=1) ? a(el) : b(el);
                return rez;

            default: return; // exit this handler for other keys
        }
        e.preventDefault(); // prevent the default action (scroll / move caret)
    });

jQuery使用键盘键

2 个答案: