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イベント メソッドは非推奨です。オブジェクト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()がマウス イベントであるということです... クリックの特殊なケースです。したがって、これを使用してキーボード イベントを実装することはできません。

おそらく、作業を表す関数を作成し、それをバインドするか、関連するイベント ハンドラー (クリック、キーダウン) で呼び出します。

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 に答える