fix: 修复弹出菜单被其他记录遮挡的问题
This commit is contained in:
@@ -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');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 点击其他地方关闭所有菜单
|
// 点击其他地方关闭所有菜单
|
||||||
|
|||||||
Reference in New Issue
Block a user