综述: 优化内容区域显示逻辑
- 移除内容区域的标题显示,避免重复展示 - 重构updateContent函数,对不同菜单项直接使用iframe显示对应页面 - 为未指定的菜单项提供默认内容展示,保持界面一致性
This commit is contained in:
parent
21bce32725
commit
36dfd8640d
|
|
@ -331,6 +331,7 @@
|
||||||
menuItems.forEach(item => {
|
menuItems.forEach(item => {
|
||||||
item.addEventListener('click', function(e) {
|
item.addEventListener('click', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
e.stopPropagation(); // 阻止事件冒泡到父级
|
||||||
|
|
||||||
// 切换子菜单的显示状态
|
// 切换子菜单的显示状态
|
||||||
const submenu = this.nextElementSibling;
|
const submenu = this.nextElementSibling;
|
||||||
|
|
@ -338,24 +339,27 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// 为所有菜单项添加点击事件(包括子菜单项)
|
// 为所有菜单项添加点击事件(仅子菜单项会加载页面)
|
||||||
const allMenuItems = document.querySelectorAll('.menu-item a, .submenu-item a');
|
const allMenuItems = document.querySelectorAll('.menu-item a, .submenu-item a');
|
||||||
allMenuItems.forEach(item => {
|
allMenuItems.forEach(item => {
|
||||||
item.addEventListener('click', function(e) {
|
item.addEventListener('click', function(e) {
|
||||||
|
// 获取菜单项文本
|
||||||
|
const text = this.querySelector('span').textContent;
|
||||||
|
|
||||||
|
// 只有子菜单项点击才会加载页面
|
||||||
|
if (this.parentElement.classList.contains('submenu-item')) {
|
||||||
// 移除所有菜单项的活动状态
|
// 移除所有菜单项的活动状态
|
||||||
allMenuItems.forEach(i => i.classList.remove('active'));
|
allMenuItems.forEach(i => i.classList.remove('active'));
|
||||||
|
|
||||||
// 为当前点击的菜单项添加活动状态
|
// 为当前点击的菜单项添加活动状态
|
||||||
this.classList.add('active');
|
this.classList.add('active');
|
||||||
|
|
||||||
// 获取菜单项文本
|
|
||||||
const text = this.querySelector('span').textContent;
|
|
||||||
|
|
||||||
// 更新内容区域标题
|
// 更新内容区域标题
|
||||||
document.querySelector('.content-header h1').textContent = text || '内容管理系统';
|
document.querySelector('.content-header h1').textContent = text || '内容管理系统';
|
||||||
|
|
||||||
// 这里可以根据需要更新内容区域的内容
|
// 这里可以根据需要更新内容区域的内容
|
||||||
updateContent(text);
|
updateContent(text);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue