Question

我使用jquery toggle()来改变这样的css并且效果很好......

$("#button").toggle(
    function(){
        $("#playlist").css("bottom","0");
    },
    function(){
        $("#playlist").css("bottom","-200px");
    }
);

我想在按下字母m时触发同样的事情，所以我将它添加到一个案例中（它设置在我可以为按下的键的情况下设置）：

.... 
case 77: // M
   What object to I bind to the toggle function?

我在那里使用什么对象来执行与上面相同的功能？

感谢大家提供真正有用的答案！

Answer 1

一个简单的解决方案是触发click元素上的#button事件：

case 77: // M
    $("#button").trigger("click");

由于toggle()绑定到引擎盖下的click事件，因此将调用相应的处理程序。

Answer 2

要手动调用事件处理程序，首先必须将函数定义为命名函数而不是匿名函数：

$("#button").toggle(on, off);

function on(){
    $("#playlist").css("bottom","0");
    isOn = true;
}
function off(){
    $("#playlist").css("bottom","-200px");
    isOn = false;
}

接下来，您可以手动调用处理程序并使用布尔值作为开关：

case 77:
    if(isOn == true) {
        off();
    } else {
        on();
    }

Answer 3

toggle事件方法为deprecated，您可以使用css的{{1}}对象的which属性：

event

http://jsfiddle.net/NPKKR/

Answer 4

你可以像这样保存状态：

case 77: // M
     var button = $("#button");
     if (button.data("toggled") == true)
     {
           $("#playlist").css("bottom","0");
           button.data("toggled","true")
     }
     else 
          {
           $("#playlist").css("bottom","-200px");
           button.data("toggled","false");
         }

也许这有帮助。

Answer 5

要理解的关键是toggle()是一个鼠标事件......只是一个特殊的点击案例。所以你不能用它来实现键盘事件。

我可能只是编写一个函数来表示工作，然后绑定它或在相关的事件处理程序中调用它（click，keydown）

var f = function() { 
    var state = $('#playlist').css('bottom');
    $('#playlist').css('bottom', state=='0px' ? '-200px' : '0px');    
}
$('#button').click(f);
$(document).keydown(f);

Answer 6

$(document).ready(function(e) {
    var pos=0;

    // On Key press
    $(document).keypress(function(e){
        if(e.which == 109 || e.which == 77) {
        if(pos==0){
        $('#playlist').css('bottom','0px');
        pos = 1;
        }else{
        $('#playlist').css('bottom','200px');
        pos = 0;    
        }
    }});

    // On Click
    $('#playlist').click(function(){
        if(pos==0){
        $('#playlist').css('bottom','0px');
        pos = 1;    
        }else{
        $('#playlist').css('bottom','200px');
        pos = 0;    
        }
    });
});

我将这个jquery toggle事件绑定到哪个对象

6 个答案: