yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

导航菜单主题色
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2026-01-10 18:02:45 +08:00
parent 6a70e41f88
commit 492e53609b
1 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
common/common.js
View File

@@ -144,20 +144,25 @@ $(function () {
hoverTimer = setTimeout(() => { hoverTimer = setTimeout(() => {
const $menu = $(".nav-cont .nav-cont-menu").eq(index); const $menu = $(".nav-cont .nav-cont-menu").eq(index);
if (!$menu.hasClass("nav-cont-empty")) { // 检查菜单是否存在且不为空
if ($menu.length > 0 && !$menu.hasClass("nav-cont-empty")) {
// 1. 先让容器从0开始（防止闪烁） // 1. 先让容器从0开始（防止闪烁）
$(".nav-cont").css("height", "0px"); $(".nav-cont").css("height", "0px");
// 2. 显示菜单（但容器高度为0，所以看不见） // 2. 隐藏所有其他菜单
$(".nav-cont .nav-cont-menu").css("display", "none");
// 3. 显示当前菜单（但容器高度为0，所以看不见）
$menu.css("display", "block"); $menu.css("display", "block");
// 3. 立即获取高度并展开（使用requestAnimationFrame确保渲染） // 4. 立即获取高度并展开（使用requestAnimationFrame确保渲染）
requestAnimationFrame(() => { requestAnimationFrame(() => {
const height = $menu.outerHeight(true); const height = $menu.outerHeight(true);
$(".nav-cont").css("height", height + "px"); $(".nav-cont").css("height", height + "px");
}); });
showIndex = index;
} }
showIndex = index;
}, 150); }, 150);
}, },
function () { function () {
@@ -168,12 +173,11 @@ $(function () {
} }
leaveTimer = setTimeout(() => { leaveTimer = setTimeout(() => {
const index = $(".nav-menu .nav-item").index($(this));
// 先收起容器 // 先收起容器
$(".nav-cont").css("height", "0"); $(".nav-cont").css("height", "0");
// 等动画完成后隐藏内容 // 等动画完成后隐藏内容
setTimeout(() => { setTimeout(() => {
$(".nav-cont .nav-cont-menu").eq(index).css("display", "none"); $(".nav-cont .nav-cont-menu").css("display", "none");
}, 300); // 等待transition完成 }, 300); // 等待transition完成
}, 100); }, 100);
} }
@@ -188,9 +192,10 @@ $(function () {
} }
const $menu = $(".nav-cont .nav-cont-menu").eq(showIndex); const $menu = $(".nav-cont .nav-cont-menu").eq(showIndex);
$menu.css("display", "block");
if (!$menu.hasClass("nav-cont-empty")) { if ($menu.length > 0 && !$menu.hasClass("nav-cont-empty")) {
$menu.css("display", "block");
requestAnimationFrame(() => { requestAnimationFrame(() => {
const height = $menu.outerHeight(true); const height = $menu.outerHeight(true);
$(".nav-cont").css("height", height + "px"); $(".nav-cont").css("height", height + "px");