动画边框菜单 - 关闭菜单与菜单项

Question

我在我的某个网站上使用此动画菜单，当用户点击菜单项时它也会关闭菜单：

https://tympanus.net/Tutorials/AnimatedBorderMenus/index5.html

有什么想法吗？

我尝试编辑bordermenu.js但无法找到解决方案

Answer 1

首先，查看borderMenu.js。您将看到菜单打开和关闭的方式是添加和删除类：

classie.remove( menu, 'bt-menu-open' );
classie.add( menu, 'bt-menu-close' );

有了这样的理解，请看第45行，在那里你可以看到创建事件监听器的条件检查：

if( classie.has( menu, 'bt-menu-open' ) ) {
    resetMenu();
}

您想更新该条件或创建一个新条件，用于监听点击其他类的元素，让我们说bt-menu-item：

<li class="bt-menu-item"><a href="#">About us</a></li>

和你的新情况：

if( classie.has( menu, 'bt-menu-open' ) || classie.has( menu, 'bt-menu-item' ) ) {
    resetMenu();
}

如果您在听到菜单项的单击时需要执行更多操作，请将其作为单独的条件语句。