网络的材料组件（菜单）
这个问题与菜单组件有关：
我已经修改了代码，以便在悬停而不是单击时打开菜单。当单击菜单中的某些元素时，我现在正尝试使菜单保持打开或关闭状态。但是我无法使其正常工作。
任何人都可以帮忙吗？
Codepen 链接： https ://codepen.io/oneezy/pen/prejpw
例子：
- 单击时
<li class="wont-close">，菜单不会关闭。menu.show(); - 单击时
<li class="will-close">，菜单将关闭。menu.hide();
这是我的尝试：
HTML
<section class="demo">
<div class="mdc-tab-bar">
<!-- Hover Toggle (Wrapper) -->
<div class="mdc-tab-wrapper hover-toggle">
<!-- Button (For Looks) -->
<a class="mdc-button mdc-button--raised mdc-button--primary mdc-tab mdc-ripple-upgraded" role="tab">
Hover Menu
</a>
<!-- Hover Menu (Toggles Show/Hide)-->
<nav class="mdc-simple-menu mdc-tab-items-wrapper" tabindex="-1">
<ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
<!-- Won't Close (When Clicked) -->
<li class="mdc-list-item wont-close clone-me" role="menuitem" tabindex="0">
<a class="category-items flex-horizontal between-stretch" href="#">
<i class="material-icons margin-r-5">keyboard_arrow_right</i>
<span>Won't Close</span>
</a>
</li>
<!-- Will Close (When Clicked) -->
<li class="mdc-list-item will-close" role="menuitem" tabindex="0">
<a class="category-items flex-horizontal between-stretch" href="#">
<i class="material-icons margin-r-5">close</i>
<span>Will Close</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
JS
/* Hover Tabs
*********************************/
function hoverTabs() {
var menuEls = document.querySelectorAll('.mdc-simple-menu');
menuEls.forEach((el, i) => {
var menu = new mdc.menu.MDCSimpleMenu(el);
var toggle = $(el).closest('.hover-toggle')[0];
var wontClose = $(el).closest('.wont-close'); // Not working...
var willClose = $(el).closest('.will-close'); // Not working...
toggle.addEventListener('mouseover', function() {
menu.show();
});
toggle.addEventListener('mouseleave', function() {
menu.hide();
});
/* Attempt #1 (Not working...)
*******************************************************/
// wontClose.addEventListener('click', function() {
// menu.show();
// });
// willClose.addEventListener('click', function() {
// menu.hide();
// });
/* Attempt #2 (Not working...)
*******************************************************/
// $('.wont-close').on('click', function(e) {
// e.preventDefault();
// menu.show();
// });
//
// $('.will-close').on('click', function(e) {
// e.preventDefault();
// menu.hide();
// });
});
}
$(document).ready(function() {
hoverTabs();
});