保持选定的菜单处于活动状态

Posted

技术标签:

【中文标题】保持选定的菜单处于活动状态【英文标题】:Keep selected menu active 【发布时间】:2020-04-01 01:34:05 【问题描述】:

我正在使用 ul 和 li 创建侧边菜单。我一直在尝试使所选菜单突出显示,但无法弄清楚我做错了什么。我尝试为顶部“ul”使用一个类并处理它的点击,以及为每个“li”添加一个类并处理它的点击。

一些菜单项有子菜单。

这是我所拥有的,也是我厌倦的:

<ul class="list-unstyled components mb-5">
    <li class="active component">
        <a href="\Home\">Dashboard</a>
    </li>
    <li class="component">
        <a href="#Sub1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Item 1</a>
        <ul class="collapse list-unstyled" id="Sub1">
            <li>
                <a href="#">Sub-Menu 1-1</a>
            </li>
            <li>
                <a href="#">Sub-Menu 1-2</a>
            </li>
        </ul>
    </li>
    <li class="component">
        <a href="#Sub2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Item 2</a>
        <ul class="collapse list-unstyled" id="Sub2">
            <li>
                <a href="#">Sub-Menu 2-1</a>
            </li>
            <li>
                <a href="#">Sub-Menu 2-2</a>
            </li>
        </ul>
    </li>
    <li class="component">
        <a href="/blah.aspx">Item 3</a>
    </li>
    <li class="component">
        <a href="/blah.aspx">Item 4</a>
    </li>
</ul>

JS/Jquery:

$(".component").on("click", "a", function()  // Also tried with "ul" class of "components" instead of "component"
    //event.preventDefault();  // When I uncomment this, clicking the menu doesn't do anything
    $(this).parent().removeClass("active");
    $(this).addClass("active");
    //$(this).parent().addClass("active").siblings().removeClass("active");
);

【问题讨论】:

这可能对你有帮助...***.com/questions/33598738/… 【参考方案1】:

您的班级切换正在删除,然后立即重新添加班级。看看你需要的切换效果: https://api.jquery.com/toggleclass/

【讨论】:

示例似乎不适用。我不想要像允许突出显示多个 p 元素的示例那样的粘性突出显示。无法让它与我的菜单一起使用。 不要专注于一个例子。这是您可以通过打开/关闭活动课程来完成的操作。将这个概念应用到您的菜单中。

以上是关于保持选定的菜单处于活动状态的主要内容,如果未能解决你的问题,请参考以下文章

鼠标移出后保持子菜单处于活动状态

子菜单链接处于活动状态时突出显示 Wordpress 父菜单项

如何在锁定屏幕上保持 osx 上的菜单栏应用程序“活动”?

如何保持悬停的菜单项处于打开状态,以便我可以使用 firebug 编辑它的样式?

ExtJS 3 DataGrid:如何使标题菜单中的最后一个检查项处于非活动状态

如何使用引导程序让单击的导航药丸保持活动状态?