如何使用 laravel 为侧边栏导航提供活动 class？

Question

我的问题是：如何在单击事件时将 mm-active class 赋予侧边栏导航？（mm-active 是 jQuery 的 class metisMenu）。 mm-active class 必须在 li 标签中，而不是在二级菜单中。

这是我的侧边栏导航 HTML 结构，位于 include 文件夹内。

<nav id="sidebarMenu" class="px-0 pe-0 pt-0 sidebar sidebar-sticky animate__fadeInUpBig animate__animated scroller">
    <div class="position-sticky sidebar-scroll">
        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-3 mb-1">
            <span>Menu</span>
        </h6>
        <ul class="nav flex-column" id="metismenu">
            <li class="nav-item mm-active">
                <a class="nav-link" href="#" aria-expanded="true">
                    <span data-feather="home"></span>
                    <span class="category-name">Dashboard</span>
                    <span class="fa arrow"></span>
                </a>
                <ul class="nav nav-second-level" aria-expanded="true">
                    <li class="nav-item"><a class="nav-link" href="/home"><span data-feather="circle"></span> Analytics</a></li>
                    <li class="nav-item"><a class="nav-link" href="/dashboard-demographic"><span data-feather="circle"></span> Demographic</a></li>
                    <li class="nav-item"><a class="nav-link" href="/dashboard-project"><span data-feather="circle"></span> Project</a></li>
                    <li class="nav-item"><a class="nav-link" href="/dashboard-hospital"><span data-feather="circle"></span> Hospital</a></li>
                    <li class="nav-item"><a class="nav-link" href="/dashboard-hrm"><span data-feather="circle"></span> HRM Dashboard</a></li>
                    <li class="nav-item"><a class="nav-link" href="/dashboard-real-estate"><span data-feather="circle"></span> Real Estate</a></li>
                </ul>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" aria-expanded="true">
                    <span data-feather="settings"></span>
                    <span class="category-name">E-Commerce</span>
                    <span class="fa arrow"></span>
                </a>
                <ul class="nav nav-second-level mm-collapse" aria-expanded="true">
                    <li class="nav-item"><a class="nav-link" href="/ecommerce-dashboard"><span data-feather="circle"></span> Dashboard</a></li>
                    <li class="nav-item"><a class="nav-link" href="/ecommerce-products"><span data-feather="circle"></span> Products</a></li>
                    <li class="nav-item"><a class="nav-link" href="/ecommerce-product-detail"><span data-feather="circle"></span> Product Detail</a></li>
                    <li class="nav-item"><a class="nav-link" href="/ecommerce-add-product"><span data-feather="circle"></span> Add Product</a></li>
                    <li class="nav-item"><a class="nav-link" href="/ecommerce-orders"><span data-feather="circle"></span> Orders</a></li>
                    <li class="nav-item"><a class="nav-link" href="/ecommerce-cart"><span data-feather="circle"></span> Cart</a></li>
                    <li class="nav-item"><a class="nav-link" href="/ecommerce-checkout"><span data-feather="circle"></span> Checkout</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

Answer 1

如果它在 blade 中，您可以像这样混合一些 php：

<nav id="sidebarMenu" class="px-0 pe-0 pt-0 sidebar sidebar-sticky animate__fadeInUpBig animate__animated scroller">
    <div class="position-sticky sidebar-scroll">
        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-3 mb-1">
            <span>Menu</span>
        </h6>
        <ul class="nav flex-column" id="metismenu">

            @php
                $activeDashboard = [
                    'home',
                    'dashboard-demographic',
                    'dashboard-project',
                    'dashboard-hospital',
                    'dashboard-hrm',
                    'dashboard-real-estate',
                ];
                $isDashboard = Request::is($activeDashboard);
            @endphp

            <li class="nav-item {{ $isDashboard ? 'mm-active' : null }}">
                <a class="nav-link" href="#" aria-expanded="{{ $isDashboard ? true : false }}">
                    <span data-feather="home"></span>
                    <span class="category-name">Dashboard</span>
                    <span class="fa arrow"></span>
                </a>
                <ul class="nav nav-second-level" aria-expanded="{{ $isDashboard ? true : false }}">
                    <li class="nav-item"><a class="nav-link" href="/home"><span data-feather="circle"></span> Analytics</a></li>
                    <li class="nav-item"><a class="nav-link" href="/dashboard-demographic"><span data-feather="circle"></span> Demographic</a></li>
                    <li class="nav-item"><a class="nav-link" href="/dashboard-project"><span data-feather="circle"></span> Project</a></li>
                    <li class="nav-item"><a class="nav-link" href="/dashboard-hospital"><span data-feather="circle"></span> Hospital</a></li>
                    <li class="nav-item"><a class="nav-link" href="/dashboard-hrm"><span data-feather="circle"></span> HRM Dashboard</a></li>
                    <li class="nav-item"><a class="nav-link" href="/dashboard-real-estate"><span data-feather="circle"></span> Real Estate</a></li>
                </ul>
            </li>

            @php
                $activeEcommerce = [
                    'ecommerce-dashboard',
                    'ecommerce-products',
                    'ecommerce-product-detail',
                    'ecommerce-add-product',
                    'ecommerce-orders',
                    'ecommerce-cart',
                    'ecommerce-checkout',
                ];
                $isEcommerce = Request::is($activeEcommerce);
            @endphp

            <li class="nav-item {{ $isEcommerce ? 'mm-active' : null }}">
                <a class="nav-link" href="#" aria-expanded="{{ $isEcommerce ? true : false }}">
                    <span data-feather="settings"></span>
                    <span class="category-name">E-Commerce</span>
                    <span class="fa arrow"></span>
                </a>
                <ul class="nav nav-second-level mm-collapse" aria-expanded="{{ $isEcommerce ? true : false }}">
                    <li class="nav-item"><a class="nav-link" href="/ecommerce-dashboard"><span data-feather="circle"></span> Dashboard</a></li>
                    <li class="nav-item"><a class="nav-link" href="/ecommerce-products"><span data-feather="circle"></span> Products</a></li>
                    <li class="nav-item"><a class="nav-link" href="/ecommerce-product-detail"><span data-feather="circle"></span> Product Detail</a></li>
                    <li class="nav-item"><a class="nav-link" href="/ecommerce-add-product"><span data-feather="circle"></span> Add Product</a></li>
                    <li class="nav-item"><a class="nav-link" href="/ecommerce-orders"><span data-feather="circle"></span> Orders</a></li>
                    <li class="nav-item"><a class="nav-link" href="/ecommerce-cart"><span data-feather="circle"></span> Cart</a></li>
                    <li class="nav-item"><a class="nav-link" href="/ecommerce-checkout"><span data-feather="circle"></span> Checkout</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

如何使用 laravel 为侧边栏导航提供活动 class？

How to give active class to sidebar navigation using laravel?

laravel

laravel-7