Сделать активным класс для родителя и подчиненных в Laravel

У меня такое меню:

<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>

Все, что я хочу, это когда я нажимаю на подменю, например, меню «Мои комментарии», меню «Комментарии» и «Мои комментарии» будут иметь такой класс

    <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>

так как я могу сделать это может произойти? Спасибо


laravel laravel-5 laravel-blade
person Ying    schedule 29.11.2017    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Попробуй это:

<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>
person Rimon Khan    schedule 30.11.2017

arrow_upward
1
arrow_downward

Вы можете использовать метод is() для объекта Request, который принимает шаблон для проверки. Например <li class="{{ request()->is('comments*') ? 'active' : '' }}">. Это означает, что если где-то в uri есть слово «комментарии», то будет добавлен «активный» класс. Конечно, вы можете быть более конкретным и можете опустить подстановочный знак.

person Jendrusha    schedule 29.11.2017

arrow_upward
0
arrow_downward

Используйте метод с условием if;

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

(Проверьте URL-адрес, если в URL-адресе есть «sample-url», тогда возвращаемый class = «active», не возвращается пустым..)

person Community    schedule 30.11.2017
comment
Можете ли вы поделиться снимком экрана в файле блейда? - person ; 30.11.2017

arrow_upward
0
arrow_downward

Вы можете попробовать использовать этот пакет 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>
person Paul Santos    schedule 30.11.2017