class="admin-dashboard">

产品列表

产品ID	产品名称	分类	价格	库存	状态
P001	智能手表	电子产品	¥ 1,299	150	在售
P002	无线耳机	电子产品	¥ 699	200	在售
P003	纯棉T恤	服装	¥ 99	500	在售
P004	智能音箱	电子产品	¥ 499	80	下架

// 产品中心下拉菜单初始化 function initProductsDropdown() { const productsDropdown = document.querySelector('.navbar .dropdown:has(#products-column-title)'); if (!productsDropdown) return; const dropdown = productsDropdown; const secondaryItems = dropdown.querySelectorAll('.dropdown-secondary-item'); const previewImg = document.getElementById('products-preview-img'); const previewTitle = document.getElementById('products-preview-title'); const previewDesc = document.getElementById('products-preview-desc'); const previewLink = document.getElementById('products-preview-link'); const columnTitle = document.getElementById('products-column-title'); const itemsPrefix = 'products-'; // 鼠标进入/离开事件 dropdown.addEventListener('mouseenter', function() { dropdown.classList.add('active'); }); dropdown.addEventListener('mouseleave', function() { setTimeout(() => { if (!dropdown.matches(':hover')) { dropdown.classList.remove('active'); } }, 100); }); // 二级菜单切换 secondaryItems.forEach(secondary => { secondary.addEventListener('mouseenter', function() { secondaryItems.forEach(s => s.classList.remove('active')); this.classList.add('active'); const category = this.dataset.category; const allItemGroups = dropdown.querySelectorAll('[id^="' + itemsPrefix + '"]'); allItemGroups.forEach(group => group.style.display = 'none'); const activeGroup = dropdown.querySelector('#' + itemsPrefix + category + '-items'); if (activeGroup) { activeGroup.style.display = 'block'; } if (columnTitle) { columnTitle.textContent = this.textContent; } const firstItem = activeGroup?.querySelector('.dropdown-item'); if (firstItem) { const imgSrc = firstItem.dataset.previewImg; const title = firstItem.dataset.previewTitle; const desc = firstItem.dataset.previewDesc; const link = firstItem.dataset.previewLink; if (imgSrc) previewImg.src = imgSrc; if (title) previewTitle.textContent = title; if (desc) previewDesc.textContent = desc; if (link) previewLink.href = link; } }); }); // 三级菜单预览 const allDropdownItems = dropdown.querySelectorAll('.dropdown-item'); allDropdownItems.forEach(item => { item.addEventListener('mouseenter', function() { allDropdownItems.forEach(i => i.classList.remove('active')); this.classList.add('active'); const imgSrc = this.dataset.previewImg; const title = this.dataset.previewTitle; const desc = this.dataset.previewDesc; const link = this.dataset.previewLink; if (imgSrc) previewImg.src = imgSrc; if (title) previewTitle.textContent = title; if (desc) previewDesc.textContent = desc; if (link) previewLink.href = link; }); }); } // DOM加载完成后初始化 document.addEventListener('DOMContentLoaded', function() { initProductsDropdown(); });

管理后台