动画边框菜单-带菜单项的关闭菜单

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

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