Question

我有一个包含许多项目的列表（或菜单）。

层次结构如下所示：

主题
- 二级主题
  - Subtopic_content
- 二级主题
  - Subtopic_content
- 二级主题
  - Subtopic_content

Subtopic 的路线可能如下所示：

route('subtopic',['topicid'=>$topic->id,'subtopicid'=>$subtopic->id])

Subtopic_content 的路线可能如下所示：

route('subtopic_content',['topicid'=>$topic->id,'subtopicid'=>$subtopic->id,'subtopic_content'=>$subtopic_content->id])

如何根据路线将活动元素标记为活动元素？

我找到了例子：

{{ Request::is( '/') ? 'active' : ''}}

但我正在寻找类似的东西：

{{ Request::is( 'subtopic',['topicid'=>$topic->id,'subtopicid'=>$subtopic->id]) ? 'active' : ''}}

如果是Subtopic_content {{ Request::is( 'subtopic_content',['topicid'=>$topic->id,'subtopicid'=>$subtopic->id,'subtopic_content'=>$subtopic_content->id]) ? 'active' : ''}}

Answer 1

在我的项目中，我创建了一个MenuHelper

public static function setActiveMenu($array)
{
    Session::put('menu', json_encode($array));
}

控制器上的

：

MenuHelper :: setActiveMenu（['topic'，'subtopic']）;

菜单视图上的

：

{{ Form::hidden('menu', Session::pull('menu')) }}

模板javascript

function setMenuActive() {
    var menu = $('input[name="menu"]').val();
    if (menu !== '') {
        menu = JSON.parse(menu);
    }

    if (menu.length === 1) {
        setMenuChild(0, menu);
    } else if (menu.length === 2) {
        setMenuParent(0, menu);
        setMenuChild(1, menu);
    } else if (menu.length > 2) {
        setMenuParent(0, menu);
        setMenuParent(1, menu);
        setMenuChild(2, menu);
    }
}

function setMenuParent(i, menu) {
    var $menuParent = $('#' + menu[i]);
    $menuParent.find('.bold').addClass('active');
    $menuParent.find('.collapsible-header').addClass('active');
    $menuParent.find('.collapsible-body').css('display', 'block');
}

function setMenuChild(i, menu) {
    $('#' + menu[i]).addClass('active');
}

Answer 2

查看hieu-le/active模块。如何使用它：阅读Manual

它很容易解决您的问题。

Answer 3

如果您正在寻找一种方法来激活您的导航栏或侧边栏ul＆gt; li项目不是那样的，而是使用javascript的localStorage或sessionStorage，这是实现目标的非常好且更方便的方式。
这项技术也用于Gentelella 使用php const你有太多代码和太多头痛

以下是sessionStorage的参考，这里是localStorage

这是我的简单代码，您可以使用sessionStorage来激活菜单，这比编写PHP代码要好得多

$('.sidebar__item > li ul a').click(function () {
    sessionStorage.setItem('active_menu', $(this).closest('.parent-menu').attr('id'));
});

document.getElementById(sessionStorage.getItem('active_menu')).click();

如何将实际元素标记为活动元素

3 个答案: