综述: 优化内容区域显示逻辑
- 移除内容区域的标题显示,避免重复展示 - 重构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) { | ||||||
|                     // 移除所有菜单项的活动状态 |  | ||||||
|                     allMenuItems.forEach(i => i.classList.remove('active')); |  | ||||||
|                      |  | ||||||
|                     // 为当前点击的菜单项添加活动状态 |  | ||||||
|                     this.classList.add('active'); |  | ||||||
|                      |  | ||||||
|                     // 获取菜单项文本 |                     // 获取菜单项文本 | ||||||
|                     const text = this.querySelector('span').textContent; |                     const text = this.querySelector('span').textContent; | ||||||
|                      |                      | ||||||
|                     // 更新内容区域标题 |                     // 只有子菜单项点击才会加载页面 | ||||||
|                     document.querySelector('.content-header h1').textContent = text || '内容管理系统'; |                     if (this.parentElement.classList.contains('submenu-item')) { | ||||||
|                      |                         // 移除所有菜单项的活动状态 | ||||||
|                     // 这里可以根据需要更新内容区域的内容 |                         allMenuItems.forEach(i => i.classList.remove('active')); | ||||||
|                     updateContent(text); |                          | ||||||
|  |                         // 为当前点击的菜单项添加活动状态 | ||||||
|  |                         this.classList.add('active'); | ||||||
|  |                          | ||||||
|  |                         // 更新内容区域标题 | ||||||
|  |                         document.querySelector('.content-header h1').textContent = text || '内容管理系统'; | ||||||
|  |                          | ||||||
|  |                         // 这里可以根据需要更新内容区域的内容 | ||||||
|  |                         updateContent(text); | ||||||
|  |                     } | ||||||
|                 }); |                 }); | ||||||
|             }); |             }); | ||||||
|              |              | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue