为 Laravel 中的父项和子项激活 class

Question

我有这样的菜单：

<li class="treeview">
        <a href="#"><i class="fa fa-comment"></i> <span>Comments</span>
            <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
            </span>
        </a>
        <ul class="treeview-menu">
            <li><a href="http://blog.dev/member/comments">All Comments</a></li>
            <li><a href="http://blog.dev/member/comments?q=me">My Comments</a></li>
            <li><a href="http://blog.dev/member/comments?q=approved">Approved</a></li>
            <li><a href="http://blog.dev/member/comments?q=disapproved">Disapproved</a></li>
        </ul>
    </li>

我想要的只是当我单击子菜单时 "My comments" 菜单，评论菜单和我的评论活动将有一个 class 像这样

    <li class="active"><a href="#"><i class="fa fa-comment"></i> <span>Comments</span></a></li>
    <li class="active active-sub"><a href="http://blog.dev/member/comments?q=me">My Comments</a></li>

那么我怎样才能让这一切发生呢？谢谢

Answer 1

您可以在 Request 接受模式的对象上使用 is() 方法进行检查。例如 <li class="{{ request()->is('comments*') ? 'active' : '' }}">。这意味着如果 uri 'comments' 中的某处存在单词，则将添加 'active' class。当然你可以更具体，你可以省略通配符。

Answer 2

使用带 if 子句的 is 方法；

{{Request::is('sample-url') ? 'class="active"' : ''}}

(检查url，如果url中有'sample-url'则return class="active"，不是return 空.. )

Answer 3

试试这个：

<li class="treeview {{ (request()->is('member/comments')) ? 'active':''  }}">
    <a href="#"><i class="fa fa-comment"></i> <span>Comments</span>
        <span class="pull-right-container">
            <i class="fa fa-angle-left pull-right"></i>
        </span>
    </a>
    <ul class="treeview-menu">
        <li class="{{ (request()->is('member/comments') && (request('q') == '')) ? 'active active-sub':''  }}">
            <a href="http://blog.dev/member/comments">All Comments</a>
        </li>
        <li class="{{ (request('q') == 'me') ? 'active active-sub':''  }}">
            <a href="http://blog.dev/member/comments?q=me">My Comments</a>
        </li>
        <li class="{{ (request('q') == 'approved') ? 'active active-sub':''  }}">
            <a href="http://blog.dev/member/comments?q=approved">Approved</a>
        </li>
        <li class="{{ (request('q') == 'disapproved') ? 'active active-sub':''  }}">
            <a href="http://blog.dev/member/comments?q=disapproved">Disapproved</a>
        </li>
    </ul>
</li>

Answer 4

您可以尝试使用这个包https://www.hieule.info/products/laravel-active-version-3-released，它提供了辅助方法来检查当前路由是否符合您的条件。

假设你的路由命名为comments.index、comments.my_comments等

<li class="{{ active_class(if_route('comments.*')) }}">
     <a href="#"><i class="fa fa-comment"></i> 
     <span>Comments</span></a>
</li>

为 Laravel 中的父项和子项激活 class

Make active class for parent and subs in Laravel

laravel

laravel-5

laravel-blade