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 16:45:20 +08:00
parent e72fbaf98a
commit b90b24a0d7
6 changed files with 617 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
common/common.js
View File

@@ -127,50 +127,76 @@ $(function () {
};
function initHeader() {
let showIndex = 0;
let hoverTimer = null;
let leaveTimer = null;
$(".nav-menu .nav-item").hover(
function () {
const index = $(".nav-menu .nav-item").index($(this));
$(".nav-cont .nav-cont-menu")
.eq(index)
.attr("style", "display: block;");
// $('.nav-cont').attr('style','display: block;')
if (
!$(".nav-cont .nav-cont-menu").eq(index).hasClass("nav-cont-empty")
) {
const height = $(".nav-cont .nav-cont-menu").eq(index).height();
$(".nav-cont").attr("style", `height: ${height}px;`);
// 清除离开定时器
if (leaveTimer) {
clearTimeout(leaveTimer);
leaveTimer = null;
}
showIndex = index;
// 添加150ms延迟，防止误触
hoverTimer = setTimeout(() => {
$(".nav-cont .nav-cont-menu")
.eq(index)
.css("display", "block");
if (
!$(".nav-cont .nav-cont-menu").eq(index).hasClass("nav-cont-empty")
) {
const height = $(".nav-cont .nav-cont-menu").eq(index).outerHeight(true);
$(".nav-cont").css("height", height + "px");
}
showIndex = index;
}, 150);
},
function () {
const index = $(".nav-menu .nav-item").index($(this));
$(".nav-cont ").eq(index).attr("style", "display: none;");
$(".nav-cont .nav-cont-menu").eq(index).attr("style", "display: none;");
$(".nav-cont").attr("style", "height:0");
// 清除悬停定时器
if (hoverTimer) {
clearTimeout(hoverTimer);
hoverTimer = null;
}
leaveTimer = setTimeout(() => {
const index = $(".nav-menu .nav-item").index($(this));
$(".nav-cont .nav-cont-menu").eq(index).css("display", "none");
$(".nav-cont").css("height", "0");
}, 100);
}
);
$(".nav-cont").hover(
function () {
//$('.nav-cont ').attr('style','display: block;')
// 清除离开定时器
if (leaveTimer) {
clearTimeout(leaveTimer);
leaveTimer = null;
}
$(".nav-cont .nav-cont-menu")
.eq(showIndex)
.attr("style", "display: block;");
//if (showIndex != 0) {
if (!$(this).hasClass("nav-cont-empty")) {
const height = $(".nav-cont .nav-cont-menu").eq(showIndex).height();
$(".nav-cont").attr("style", `height: ${height}px;`);
.css("display", "block");
if (!$(".nav-cont .nav-cont-menu").eq(showIndex).hasClass("nav-cont-empty")) {
const height = $(".nav-cont .nav-cont-menu").eq(showIndex).outerHeight(true);
$(".nav-cont").css("height", height + "px");
}
},
function () {
//$('.nav-cont ').attr('style','display: none;')
$(".nav-cont .nav-cont-menu")
.eq(showIndex)
.attr("style", "display: none;");
$(".nav-cont").attr("style", "height:0");
leaveTimer = setTimeout(() => {
$(".nav-cont .nav-cont-menu")
.eq(showIndex)
.css("display", "none");
$(".nav-cont").css("height", "0");
}, 100);
}
);
if (localStorage.jwt) {
if (sessionStorage.accountInfo) {
const obj = JSON.parse(sessionStorage.accountInfo);