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

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();
}

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