尝试构建带有动画的下拉菜单，并在按键时开始

Question

我一直在尝试构建此菜单，该菜单从角落的小图标开始，并在按键（当前单击）时激活了复选框，从而启动了动画。我现在大部分的菜单+动画都可以使用了，我只是停留在如何通过按键激活它上。我希望键为“ K”，但似乎没有脚本适合我。这是我的所有代码，以及可以尝试帮助我编写按键脚本的所有内容。  /*////////////////  // Jig Dropdown //  ////////////////*/document.onkeypress = function(e) {  if ((e.which || e.keyCode) == 311) { //this is the number code for the letter "K"    document.getElementById('start').click();    if (document.getElementById('start').className.indexOf("checkbox-checked") == -1) document.getElementById('start').className += ' checkbox-checked';  }};document.onkeyup = function(e) {  document.getElementById('start').className = document.getElementById('start').className.replace(/button\-active/g, "");}function start() {  console.log("start")}input[type=checkbox] {  height: 1.5rem;  opacity: 0;  position: absolute;  right: .5rem;  top: .5rem;   width: 1.5rem;  z-index: 3;}#menu {  background-color: #23272a;  border-radius: 2rem 0 2rem 2rem;  height: 2rem;  position: absolute;  right: .5rem;  top: .5rem;   transition: .3s;  width: 2rem;  z-index: 1;}#line-one, #line-two {  background: #949c9e;  height: .2rem;  position: absolute;  right: 1rem;  top: 1.1rem;  transition: .3s;  width: 1rem;  z-index: 2;}#line-two {  top: 1.6rem;}#icon-one, #icon-two, #icon-three {  background: #23272a;  border-radius: 1rem;  height: 1.5rem;  position: absolute;  right: .75rem;  top: 1rem;  transition: .3s;  transition-delay: .2s;  width: 1.5rem;  rgba(255, 255, 255, 0.3)}#icon-one {  background: #949c9e;}.icon {  display: inline-block;  fill: white;  height: 1rem;  left: .37rem;  position: absolute;  top: .25rem;  width: .8rem;}#icon-two {  background: #949c9e;}#icon-three {  background: #949c9e;}#icon-one:hover, #icon-two:hover, #icon-three:hover {  right: 2rem;  width: 13rem;}/*ANIMATION MECHANICS*/input[type=checkbox]:checked ~ #menu {  transform: rotate(-225deg);}