fix: 修复弹出菜单被其他记录遮挡的问题
This commit is contained in:
@@ -22,6 +22,14 @@
|
||||
.note-item:hover .action-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
/* 菜单弹出时强制显示,不被其他元素遮挡 */
|
||||
.action-btn.show-menu {
|
||||
opacity: 1 !important;
|
||||
z-index: 100 !important;
|
||||
}
|
||||
.popup-menu {
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100 h-screen overflow-hidden">
|
||||
@@ -397,18 +405,34 @@
|
||||
// 显示/隐藏菜单
|
||||
function toggleMenu(id) {
|
||||
const menu = document.getElementById(`menu-${id}`);
|
||||
const actionBtn = menu?.closest('.action-btn');
|
||||
|
||||
if (menu) {
|
||||
// 先隐藏其他所有菜单
|
||||
document.querySelectorAll('[id^="menu-"]').forEach(m => {
|
||||
if (m.id !== `menu-${id}`) m.classList.add('hidden');
|
||||
m.classList.remove('popup-menu');
|
||||
m.classList.add('hidden');
|
||||
m.closest('.action-btn')?.classList.remove('show-menu');
|
||||
});
|
||||
|
||||
const isHidden = menu.classList.contains('hidden');
|
||||
menu.classList.toggle('hidden');
|
||||
|
||||
if (!menu.classList.contains('hidden')) {
|
||||
menu.classList.add('popup-menu');
|
||||
actionBtn?.classList.add('show-menu');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function hideMenu(id) {
|
||||
const menu = document.getElementById(`menu-${id}`);
|
||||
if (menu) menu.classList.add('hidden');
|
||||
const actionBtn = menu?.closest('.action-btn');
|
||||
if (menu) {
|
||||
menu.classList.add('hidden');
|
||||
menu.classList.remove('popup-menu');
|
||||
actionBtn?.classList.remove('show-menu');
|
||||
}
|
||||
}
|
||||
|
||||
// 点击其他地方关闭所有菜单
|
||||
|
||||
Reference in New Issue
Block a user