Admin topnav: only allow one details group open via JS

This commit is contained in:
萝卜
2026-03-15 02:08:12 +00:00
parent bdea18c976
commit fdd14c463c
2 changed files with 57 additions and 5 deletions

View File

@@ -14,10 +14,10 @@
<div class="topnav-row">
<a class="topnav-brand" href="/admin">SaaSShop</a>
<nav class="topnav-menu" aria-label="总台主导航">
<nav class="topnav-menu" aria-label="总台主导航" data-role="topnav-groups-root">
<a class="topnav-link" href="/admin">总览</a>
<details class="topnav-item nav-group">
<details class="topnav-item nav-group" data-role="topnav-group">
<summary class="topnav-summary nav-group-title">收费中心</summary>
<div class="topnav-dropdown">
<a href="/admin/platform-orders" class="topnav-sub nav-item nav-item--sub">平台订单</a>
@@ -26,7 +26,7 @@
</div>
</details>
<details class="topnav-item nav-group">
<details class="topnav-item nav-group" data-role="topnav-group">
<summary class="topnav-summary nav-group-title">站点治理</summary>
<div class="topnav-dropdown">
<a href="/admin/merchants" class="topnav-sub nav-item nav-item--sub">站点管理</a>
@@ -36,14 +36,14 @@
</div>
</details>
<details class="topnav-item nav-group">
<details class="topnav-item nav-group" data-role="topnav-group">
<summary class="topnav-summary nav-group-title">增长转化</summary>
<div class="topnav-dropdown">
<a href="/admin/platform-leads" class="topnav-sub nav-item nav-item--sub">开通线索</a>
</div>
</details>
<details class="topnav-item nav-group">
<details class="topnav-item nav-group" data-role="topnav-group">
<summary class="topnav-summary nav-group-title">系统</summary>
<div class="topnav-dropdown">
<a href="/admin/settings/system" class="topnav-sub nav-item nav-item--sub">系统配置</a>
@@ -91,5 +91,25 @@
@yield('content')
</main>
</div>
<script data-action="topnav-single-open">
(function(){
var root = document.querySelector('[data-role="topnav-groups-root"]');
if(!root){return;}
var groups = root.querySelectorAll('details[data-role="topnav-group"]');
if(!groups || groups.length === 0){return;}
groups.forEach(function(d){
d.addEventListener('toggle', function(){
if(!d.open){return;}
groups.forEach(function(other){
if(other !== d){
other.open = false;
}
});
});
});
})();
</script>
</body>
</html>