选择后如何关闭汉堡菜单？ javascript

Posted 2023-05-08

【中文标题】选择后如何关闭汉堡菜单？ javascript

【英文标题】：how to close the burger menu after selection? javascript

【发布时间】：2022-01-05 04:45:16

【问题描述】：

去年我参加了一个网站设计课程。 这位女士是一步一步详细解释的，但我不清楚一件事。在移动版本中选择汉堡菜单中的某个项目时，它会保持打开状态。

这是我的网站，你可以试试！

my site

这是负责打开菜单的代码：

$('.js--nav-icon').click(function() 
  var nav = $('.js--main-nav');
  var icon = $('.js--nav-icon ion-icon');
  nav.slideToggle(200);
  icon.attr('name', icon.attr('name') === 'menu-outline' ? 'close-outline' : 'menu-outline');
);

【问题讨论】：

能解释一下吗？

【参考方案1】：

要实现您的目标，您需要将新的事件处理程序绑定到汉堡菜单中的a 元素。此事件处理程序将找到.js--nav-icon 并通过再次调用slideToggle() 将其关闭：

var $nav = $('.js--main-nav');
var $iconContainer = $('.js--nav-icon');

let changeBurgerNameAttr = $c => $c.find('ion-icon').attr('name', (i, name) => name === 'menu-outline' ? 'close-outline' : 'menu-outline');

// toggle burger on click
$iconContainer.on('click', e => 
  $nav.slideToggle(200);
  changeBurgerNameAttr($iconContainer);
);

// hide burger when item selected
$nav.on('click', 'a', e => 
  e.preventDefault();
  $nav.slideUp(200);
  changeBurgerNameAttr($iconContainer);
);

【讨论】：

我们让它关闭菜单，但是在打开之前按下按钮时出现错误，它会自动打开和关闭5次..

这种行为听起来像是您多次绑定事件。没有看到实际代码就很难调试，所以如果您需要进一步的帮助，请编辑问题以在 sn-p 中包含一个工作示例，而不是指向您网站的链接。