fix: 修复弹出菜单被其他记录遮挡的问题

This commit is contained in:
2026-04-09 00:40:57 +08:00
parent 43b625d31a
commit 75026508b8

View File

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