Laravel中Bootstrap 5导航问题：父级选中时子级误激活如何修复

问题根源 #

你之前的判断逻辑可能过于宽泛，比如给所有子级菜单套用了父级的模糊匹配条件，导致父级激活时所有子级都被标记为激活状态。

解决方法 #

利用Laravel自带的路由判断方法，分别给父级和子级设置精准的激活条件：

1. 父级菜单（Booking）激活判断
   当当前路由是booking本身或任意booking/...子路由时，给父级添加active类，使用Route::is('booking*')实现模糊匹配：

   <li class="nav-item dropdown">
     <a 
       class="nav-link dropdown-toggle {{ Route::is('booking*') ? 'active' : '' }}" 
       href="#" 
       role="button" 
       data-bs-toggle="dropdown"
     >
       Booking
     </a>
     <ul class="dropdown-menu">
       <!-- 子菜单列表 -->
     </ul>
   </li>
   

2. 子级菜单激活判断
   子级菜单需要精准匹配各自的路由，避免模糊匹配导致的批量激活。假设你的子路由命名为booking.index、booking.create等，直接用Route::is('路由名称')判断：

   <li>
     <a 
       class="dropdown-item {{ Route::is('booking.index') ? 'active' : '' }}" 
       href="{{ route('booking.index') }}"
     >
       所有预订
     </a>
   </li>
   <li>
     <a 
       class="dropdown-item {{ Route::is('booking.create') ? 'active' : '' }}" 
       href="{{ route('booking.create') }}"
     >
       新增预订
     </a>
   </li>
   

3. 无命名路由的替代方案
   如果你没有给路由命名，可以用Request::is()基于URL路径判断：

   <!-- 父级 -->
   <a class="nav-link dropdown-toggle {{ request()->is('booking*') ? 'active' : '' }}" href="#">Booking</a>
   <!-- 子级 -->
   <a class="dropdown-item {{ request()->is('booking') ? 'active' : '' }}" href="/booking">所有预订</a>
   <a class="dropdown-item {{ request()->is('booking/create') ? 'active' : '' }}" href="/booking/create">新增预订</a>
   

注意事项 #

• 推荐使用命名路由，比直接写URL更易维护
• 若使用request()快捷方法，无需额外引入类

内容的提问来源于stack exchange，提问作者Patrick van Oostveen