综述: 优化商家端web菜单导航功能
- 在菜单链接的loadContent函数调用中添加this参数,便于在函数内部标识当前点击的元素 - 简化订单管理菜单结构,将原来的二级菜单改为直接链接到订单管理页面 - 完善loadContent函数,增加对clickElement参数的处理以实现菜单项高亮显示 - 优化菜单交互体验,确保正确标识当前活动菜单项
This commit is contained in:
parent
aeae075443
commit
fc8265d202
|
|
@ -296,11 +296,11 @@
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="submenu">
|
<div class="submenu">
|
||||||
<a href="#" class="submenu-link" onclick="loadContent('./1 权限管理/子经营者管理.html')">
|
<a href="#" class="submenu-link" onclick="loadContent('./1 权限管理/子经营者管理.html', this)">
|
||||||
<span class="submenu-icon"></span>
|
<span class="submenu-icon"></span>
|
||||||
子经营者管理
|
子经营者管理
|
||||||
</a>
|
</a>
|
||||||
<a href="#" class="submenu-link" onclick="loadContent('./1 权限管理/商户管理.html')">
|
<a href="#" class="submenu-link" onclick="loadContent('./1 权限管理/商户管理.html', this)">
|
||||||
<span class="submenu-icon"></span>
|
<span class="submenu-icon"></span>
|
||||||
商户管理
|
商户管理
|
||||||
</a>
|
</a>
|
||||||
|
|
@ -308,25 +308,16 @@
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="menu-item">
|
<li class="menu-item">
|
||||||
<div class="menu-link" onclick="toggleSubmenu(this)">
|
<a href="#" class="menu-link" onclick="loadContent('./订单管理/订单管理.html', this)">
|
||||||
<span class="menu-icon">
|
<span class="menu-icon">
|
||||||
<i class="fas fa-tasks"></i>
|
<i class="fas fa-tasks"></i>
|
||||||
</span>
|
</span>
|
||||||
<span class="menu-text">运营管理</span>
|
<span class="menu-text">订单管理</span>
|
||||||
<span class="menu-arrow">
|
|
||||||
<i class="fas fa-chevron-right"></i>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="submenu">
|
|
||||||
<a href="#" class="submenu-link">
|
|
||||||
<span class="submenu-icon"></span>
|
|
||||||
订单管理
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="menu-item">
|
<li class="menu-item">
|
||||||
<a href="#" class="menu-link" onclick="loadContent('./商品管理/商品管理.html')">
|
<a href="#" class="menu-link" onclick="loadContent('./商品管理/商品管理.html', this)">
|
||||||
<span class="menu-icon">
|
<span class="menu-icon">
|
||||||
<i class="fas fa-box"></i>
|
<i class="fas fa-box"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -471,7 +462,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// 加载内容到iframe
|
// 加载内容到iframe
|
||||||
function loadContent(url) {
|
function loadContent(url, clickedElement) {
|
||||||
const contentPlaceholder = document.getElementById('contentPlaceholder');
|
const contentPlaceholder = document.getElementById('contentPlaceholder');
|
||||||
const contentFrame = document.getElementById('contentFrame');
|
const contentFrame = document.getElementById('contentFrame');
|
||||||
|
|
||||||
|
|
@ -488,7 +479,9 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// 添加当前点击菜单项的高亮
|
// 添加当前点击菜单项的高亮
|
||||||
event.target.classList.add('active');
|
if (clickedElement) {
|
||||||
|
clickedElement.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
// 动态调整iframe高度以适应内容
|
// 动态调整iframe高度以适应内容
|
||||||
contentFrame.onload = function() {
|
contentFrame.onload = function() {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue