本帖所使用mdui版本为 v2
首先我在写 FoxHC 的时候，就遇到了这个下拉组件做菜单的问题
比如下面这组：
<mdui-dropdown trigger="contextmenu" placement="auto" open-delay="150" close-delay="150">
<div slot="trigger" class="user">
<span class="users-nick">Rut</span><span class="users-trip">//////</span>
</div>
<mdui-menu submenu-trigger="click hover" submenu-open-delay="200" submenu-close-delay="200">
<mdui-menu-item>At</mdui-menu-item>
<mdui-menu-item>
屏蔽
<mdui-menu-item slot="submenu" tabindex="0">屏蔽昵称</mdui-menu-item>
<mdui-menu-item slot="submenu">屏蔽识别码</mdui-menu-item>
<mdui-menu-item slot="submenu">屏蔽 Hash</mdui-menu-item>
</mdui-menu-item>
</mdui-menu>
</mdui-dropdown>
你可以丢mdui playground 试试，鼠标点到“屏蔽”菜单就关闭（这样子手机端就完全展开不了子菜单，一展开就关闭哈哈）
我是怎么解决的呢？在这多级菜单那个地方用js禁用点击事件传播
..........addEventListener('click', (event) => {
event.stopPropagation(); // 阻止点击分级菜单时错误的被关闭
});
function makeSubMenu(cid, user, text, sub) {
let menu = document.createElement('mdui-menu-item');
menu.addEventListener('click', (event) => {
event.stopPropagation(); // 阻止点击分级菜单时错误的被关闭
});
menu.innerText = text;
sub.forEach((item) => {
if (item.verify && !item.verify(cid, user)) return;
let item_dom;
if (item.sub) {
item_dom = makeSubMenu(cid, user, item.text, item.sub);
} else {
item_dom = makeMenuItem(cid, user, item);
}
item_dom.slot = 'submenu';
menu.appendChild(item_dom);
});
return menu;
}
然后就正常了，原理是用了悬浮展开菜单
