【发布时间】：2018-01-15 11:05:08
【问题描述】：
网页的材料组件（菜单）
这个问题与Menu Component有关：
我修改了代码，以便在悬停而不是单击时打开菜单。我现在正尝试在单击菜单内部的某些元素时使菜单保持打开或关闭状态。但我无法让它工作。
谁能帮忙？
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();
});
【问题讨论】：
标签： javascript jquery material-design addeventlistener material-components