时间戳

首页 > 解决方案 > 如何添加事件监听器以关闭菜单切换

function - 如何添加事件监听器以关闭菜单切换

问题描述

我的导航栏（标题）中有一个切换按钮，切换时会打开全屏菜单。当按钮被切换（激活）时，按钮的图标从汉堡条变为十字，当按下十字时，一切都恢复正常。一切都很完美。

我想知道是否可以添加一个侦听器事件，以便能够通过按“Esc”键作为替代来关闭切换。该按钮也应该保持有用。

我正在使用 Elementor 插件，所以我的“按钮”实际上是 elementor 的 HTML 小部件。

这是小部件内的代码：

<button class="hamburger hamburger--spin" type="button">
<a><div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</a>
</button>

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hamburger').click(function(){
$('.hamburger--spin').toggleClass('is-active');
});
});
});
</script>

“hamburger--spin”的东西是为了触发一个动画，在切换时将汉堡菜单栏变成一个十字。我的猜测是我可以稍微修改一下脚本以添加“Escape”键功能。

我尝试过（并阅读过）

我没有任何javascript知识，但在调查后我将脚本调整为以下代码，我认为它可能会奏效（它没有）

<script>
  document.addEventListener('DOMContentLoaded', function() {
  jQuery(function($){
  $('.hamburger').click(function(){
  $('.hamburger--spin').toggleClass('is-active');
  if(e.key === "Escape") {
        $('.hamburger--spin').toggleClass('is-active');
      }
  });
  });
  });
 </script>

可能会派上用场的其他信息（即使您可能已经知道这一点）

据我所知，“Escape”的按键写为“e”或“27”。

也许相关信息

该按钮不会打开弹出窗口或普通下拉菜单，它会打开一个全屏部分，该部分有点隐藏，仅在切换处于活动状态时才会显示。

标签： functionmenujavascriptheaderevents

解决方案

推荐阅读