Javascript 向按钮添加键盘元素

我在这里有一个名为

.togglePL

的按钮，并对其进行了编码，以在

#pageList

中展开或折叠页面选择器。我想使用键盘元素

alt+p

展开或折叠页面选择器，而不必单击按钮本身。我曾尝试通过JS online和这里的问题研究如何做到这一点，但没有成功。请查找所附代码，如有任何帮助，将不胜感激。谢谢

//切换页面列表
$（文档）.ready（函数（）{
$（'.togglePL'）。单击（函数（e）{
如果（$（'#页面列表'）.width（）==40）{
$（'.textPL'）.show（）；
$（'页面列表'）。宽度（168）；
$（'.togglePL'）.css（{左：'192px'，转换：'none'}）；
$（#pagelista'）.css（{fontSize:'10pt'}）；
}
否则{
$（'.textPL'）.hide（）；
$（'页面列表'）。宽度（40）；
$（'.togglePL'）.css（{left:'64px'，transform:'rotate（180deg）”，transitionDuration:'0.3s'）；
$（#pagelista'）.css（{fontSize:'14pt'}）；
}
});
});
/*
~版权所有（c）Summit学习管理系统（由学生为学生制作）。2020
*/
html>正文{
身高：100%；
溢出：隐藏；
保证金：0；
填充：0；
字体系列：“投石机MS”，无衬线；
}
#包装纸{
显示器：flex；
柔性包装：nowrap；
身高：100%；
最小高度：100vh；
溢出：隐藏；
背景:#555；
}
/*航行*/
#航行{
显示器：flex；
弯曲方向：立柱；
最小高度：100%；
宽度：40px；
填充：8px0；
背景：#1b315e；
}
#导航>.spacer{
显示：块；
利润率：120px0；
}
#导航>a{
显示：块；
保证金：0；
填充：28px0；
文本对齐：居中；
字号：18pt；
颜色：#fff；
}
#导航>a.active{
颜色：#fff；
左边框：2倍实心#fff；
背景：#2b417e；
}
#导航>a:未（.active）：悬停{
颜色：#fff；
左边框：2倍实心#fff；
背景：#2b417e；
不透明度：0.75；
过渡时间：0.3s；
}
#导航>.navLinks{
游标：继承；
显示：块；
保证金：0；
高度：48px；
背景：无；
边界：无；
大纲：无；
文本对齐：居中；
字号：14pt；
颜色：#fff；
}
#导航>导航链接：悬停{
颜色：#fff；
背景：#2b417e；
过渡时间：0.3s；
}
/*页面列表*/
#页面列表{
显示器：flex；
弯曲方向：立柱；
最小高度：100%；
宽度：168px；
填充：8px0；
证明内容：中心；
背景：#2b417e；
}
#页面列表>a{
显示：块；
保证金：0；
填充：28px0；
文本转换：大写；
文字装饰：无；
文本对齐：居中；
字号：10pt；
颜色：#fff；
}
#页面列表>a.active{
颜色：#fff；
左边框：2倍实心#fff；
背景：#3b518e；
}
#页面列表>a:未（.active）：悬停{
颜色：#fff；
左边框：2倍实心#fff；
背景：#3b518e；
不透明度：0.75；
过渡时间：0.3s；
}
#页面列表>.togglePL{
显示：块；
位置：绝对位置；
顶部：12px；
左：192px；
高度：32px；
宽度：32px；
背景：#eee；
边框：2个实心#999；
边界半径：100%；
文本对齐：居中；
字号：10pt；
颜色：#999；
}

欢迎-峰会
您可以这样做。在按键事件中，检查
keycode
为80并且按下了
altkey
。然后触发菜单的单击事件

if (e.altKey && keyCode == 80) 

代码
//切换页面列表
$（文档）.ready（函数（）{
$（'.togglePL'）。单击（函数（e）{
如果（$（'#页面列表'）.width（）==40）{
$（'.textPL'）.show（）；
$（'页面列表'）。宽度（168）；
$（'.togglePL'）.css（{左：'192px'，转换：'none'}）；
$（#pagelista'）.css（{fontSize:'10pt'}）；
}
否则{
$（'.textPL'）.hide（）；
$（'页面列表'）。宽度（40）；
$（'.togglePL'）.css（{left:'64px'，transform:'rotate（180deg）”，transitionDuration:'0.3s'）；
$（#pagelista'）.css（{fontSize:'14pt'}）；
}
});
});
$（文档）.on（'keydown'，函数（e）{
设keyCode=e.keyCode | e.which；
如果（例如，altKey&&keyCode==80）{
$（'.togglePL'）.trigger（'click'））
}
})
/*
~版权所有（c）Summit学习管理系统（由学生为学生制作）。2020
*/
html>正文{
身高：100%；
溢出：隐藏；
保证金：0；
填充：0；
字体系列：“投石机MS”，无衬线；
}
#包装纸{
显示器：flex；
柔性包装：nowrap；
身高：100%；
最小高度：100vh；
溢出：隐藏；
背景:#555；
}
/*航行*/
#航行{
显示器：flex；
弯曲方向：立柱；
最小高度：100%；
宽度：40px；
填充：8px0；
背景：#1b315e；
}
#导航>.spacer{
显示：块；
利润率：120px0；
}
#导航>a{
显示：块；
保证金：0；
填充：28px0；
文本对齐：居中；
字号：18pt；
颜色：#fff；
}
#导航>a.active{
颜色：#fff；
左边框：2倍实心#fff；
背景：#2b417e；
}
#导航>a:未（.active）：悬停{
颜色：#fff；
左边框：2倍实心#fff；
背景：#2b417e；
不透明度：0.75；
过渡时间：0.3s；
}
#导航>.navLinks{
游标：继承；
显示：块；
保证金：0；
高度：48px；
背景：无；
边界：无；
大纲：无；
文本对齐：居中；
字号：14pt；
颜色：#fff；
}
#导航>导航链接：悬停{
颜色：#fff；
背景：#2b417e；
过渡时间：0.3s；
}
/*页面列表*/
#页面列表{
显示器：flex；
弯曲方向：立柱；
最小高度：100%；
宽度：168px；
填充：8px0；
证明内容：中心；
背景：#2b417e；
}
#页面列表>a{
显示：块；