0

我正在使用 jquerytoggle()来更改一些像这样的 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?

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

谢谢大家的真正有用的答案！

4

6 回答 6

4

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

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

由于toggle()在后台绑定到click事件，这将调用适当的处理程序。

于 2012-10-13T05:10:32.793 回答
1

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

$("#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();
    }
于 2012-10-13T05:07:32.270 回答
1

toggle不推荐使用event 方法，可以使用对象css的函数和 which属性event：

$("#button").on('click', function(){
    $("#playlist").css("bottom", function(i, bottom){
        return bottom === '0px' ? '-200px' : '0px' 
    });
});

$(document).on('keyup', function(event){
   if (event.which === '77') {
      $("#playlist").css("bottom", function(i, bottom){
          return bottom === '0px' ? '-200px' : '0px' 
      });
   }
})

http://jsfiddle.net/NPKKR/

于 2012-10-13T05:07:45.263 回答
1

您可以像这样保存状态：

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

也许这有帮助。

于 2012-10-13T05:09:12.387 回答
1

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

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

var f = function() { 
    var state = $('#playlist').css('bottom');
    $('#playlist').css('bottom', state=='0px' ? '-200px' : '0px');    
}
$('#button').click(f);
​​​​​​​$(document).keydown(f);​​​​​​​
于 2012-10-13T05:25:15.663 回答
-1 
$(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;    
        }
    });
});
于 2012-10-13T06:34:18.310 回答