如何在按下按鍵時顯示元素，然後如果再次按下，隱藏元素？

我有這個項目，我有一個側面菜單，可以使用[Ctrl] + [Z]來切換。我希望它在下次按下[Ctrl] + [Z]圖案時隱藏。我對JavaScript的平庸的知識阻礙了我使用谷歌語句，所以我最終沒有找到任何東西，所以我來到這裏。隨着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"); 
     } 

    }); 

});

任何幫助將非常感激！ :-)

來源

2012-12-08 ModernDesigner

你有沒有實際的代碼？如果是這樣，它是如何失敗的？ –

它在動畫完成後切換元素，它隱藏元素。 – ModernDesigner

.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-08 23:12:52

WELL JQUERY只是現在有一些工具，不是嗎？！？？？？！？大聲笑。謝謝，這解決了它！ :-) – ModernDesigner

+1猜我需要輸入更快？ – adeneo

你只需要綁定一次到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-08 23:13:55

這將執行一個不同的動畫。還是不錯的。 –

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

Fiddle

來源

2012-12-08 23:16:01

+1爲靈活的方法。 –

如何在按下按鍵時顯示元素，然後如果再次按下，隱藏元素？

回答

相關問題