Bootstrap侧边栏Dropdown选中选项后保持展开状态的问题

问题分析 #

你遇到的核心问题是：点击下拉菜单选项跳转页面后，页面刷新导致下拉菜单收起。之前尝试的hide.bs.dropdown事件阻止方法失效，原因是页面跳转后JS状态重置，且该方法仅适用于阻止用户主动关闭下拉的场景，无法应对页面刷新后的状态恢复。

解决方案 #

我们需要通过后端动态渲染状态实现页面加载时自动展开对应下拉菜单，同时配合必要的交互优化：

1. 修正HTML结构中的状态属性

修改父级导航链接和下拉菜单的类与属性，根据当前路由动态添加展开状态标识：

<li class="nav-item {{ ($prefix == 'admin/category' || $prefix == 'admin/subCategory') ? 'show' : '' }}">

<a class="nav-link {{ ($prefix == 'admin/category' || $prefix == 'admin/subCategory') ? 'activeSideNavParent show' : '' }}" 
   href="" 
   data-bs-toggle="dropdown" 
   aria-expanded="{{ ($prefix == 'admin/category' || $prefix == 'admin/subCategory') ? 'true' : 'false' }}">
    <div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
        <i class="ni ni-ungroup text-primary text-sm opacity-10"></i>
    </div>
    <span class="nav-link-text ms-1">Categories</span>
</a>

<ul class="dropdown-menu mt-0 {{ ($prefix == 'admin/category' || $prefix == 'admin/subCategory') ? 'show' : '' }}">

    <li class="nav-item">
        <a class="nav-link {{ ($prefix == 'admin/category') ? 'btn activeSideNav' : '' }}" href="{{ route('admin.category.index') }}">
            <div class="icon icon-shape icon-sm border-radius-md text-center me-2 d-flex align-items-center justify-content-center">
                <i class="ni ni-ungroup text-primary text-sm opacity-10"></i>
            </div>
            <span class="nav-link-text ms-1">Category</span>
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link {{ ($prefix == 'admin/subCategory') ? 'btn activeSideNav' : '' }}" href="{{ route('admin.subCategory.index') }}">
            <div class="icon border-radius-md text-center me-2 d-flex align-items-center justify-content-center sideNavButton">
                <i class="ni ni-align-center text-primary text-sm opacity-10"></i>
            </div>
            <span class="nav-link-text ms-1">Sub Category</span>
        </a>
    </li>

</ul>
</li>

2. 非跳转场景的JS优化（可选）

如果部分下拉项采用AJAX请求不跳转页面，可添加以下JS阻止下拉收起：

// 替换为你的下拉父元素选择器
document.querySelector('.nav-item:has(.dropdown-menu)').addEventListener('hide.bs.dropdown', function (e) {
    // 判断点击目标是下拉菜单内的链接
    if (e.clickEvent && e.clickEvent.target.closest('.dropdown-menu')) {
        e.preventDefault(); // 阻止下拉菜单收起
    }
});

关键说明 #

• Bootstrap下拉菜单的展开状态由show类和aria-expanded="true"共同控制，后端根据当前路由动态渲染这些属性，就能在页面加载时自动展开对应下拉。
• 之前的return false方法无效，是因为页面跳转后JS上下文重置，无法保留状态，必须通过后端渲染实现状态持久化。

内容的提问来源于stack exchange，提问作者Wakil Ahmed