在 Bootstrap 的下拉菜单上显示活动菜单（无限制）

Question

我想突出显示侧栏菜单上的活动页面。我正在使用 Bootstrap（无限制）。

我尝试了多种 javascript 方法均无济于事。下面是侧边栏菜单。 我正在使用 Limitless，我无法使用 jquery 将活动状态添加到菜单项。我进行了搜索，但只有 v2 的示例，并且锚点是具有活动类的锚点，而不是列表项。

菜单结构示例

<div class="card card-sidebar-mobile">
    <ul class="nav nav-sidebar" data-nav-type="accordion">
        <!-- Main -->
        <li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Ana</div> <i class="icon-menu" title="Ana"></i></li>
        <li class="nav-item">
            <a href="#" class="nav-link">
                <i class="icon-home2"></i>
                <span>
                    Anasayfa
                </span>
            </a>
        </li>
        <!-- Site Yönetimi -->
        <li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Site Yönetimi</div> <i class="icon-menu" title="Site Yönetimi"></i></li>
        <li class="nav-item nav-item-submenu  nav-item-open">
            <a href="#" class="nav-link"><i class="icon-cog4"></i> <span>Site Yönetimi</span></a>
            <ul class="nav nav-group-sub "style="display: block" data-submenu-title="Site Yönetimi">
                <li class="nav-item"><a href="#" class="nav-link active">Test</a></li>
                <li class="nav-item"><a href="#" class="nav-link">Yeni</a></li>
                <li class="nav-item"><a href="#" class="nav-link">Deneme</a></li>
            </ul>
        </li>
        <!-- Test-->
        <li class="nav-item nav-item-submenu nav-item-expanded">
            <a href="#" class="nav-link"><i class="icon-pencil3"></i> <span>Form components</span></a>
            <ul class="nav nav-group-sub" data-submenu-title="Form components">
                <li class="nav-item"><a href="form_inputs.html" class="nav-link">Basic inputs</a></li>
            </ul>
        </li>
        <li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Page kits</div> <i class="icon-menu" title="Page kits"></i></li>
        <li class="nav-item nav-item-submenu">
            <a href="#" class="nav-link"><i class="icon-grid6"></i> <span>General pages</span></a>
            <ul class="nav nav-group-sub" data-submenu-title="General pages">
                <li class="nav-item"><a href="general_feed.html" class="nav-link">Feed</a></li>
                <li class="nav-item"><a href="general_embeds.html" class="nav-link">Embeds</a></li>
                <li class="nav-item nav-item-submenu">
                    <a href="#" class="nav-link">Blog</a>
                    <ul class="nav nav-group-sub">
                        <li class="nav-item"><a href="blog_classic_v.html" class="nav-link">Classic vertical</a></li>
                        <li class="nav-item"><a href="blog_classic_h.html" class="nav-link">Classic horizontal</a></li>
                        <li class="nav-item-divider"></li>
                    </ul>
                </li>
                <li class="nav-item nav-item-submenu">
                    <a href="#" class="nav-link">Timelines</a>
                    <ul class="nav nav-group-sub">
                        <li class="nav-item"><a href="timelines_left.html" class="nav-link">Left timeline</a></li>
                        <li class="nav-item"><a href="timelines_right.html" class="nav-link">Right timeline</a></li>
                        <li class="nav-item"><a href="timelines_center.html" class="nav-link">Centered timeline</a></li>
                    </ul>
                </li>
                <li class="nav-item nav-item-submenu">
                    <a href="#" class="nav-link">Gallery</a>
                    <ul class="nav nav-group-sub">
                        <li class="nav-item"><a href="gallery_grid.html" class="nav-link">Media grid</a></li>
                        <li class="nav-item"><a href="gallery_titles.html" class="nav-link">Media with titles</a></li>
                    </ul>
                </li>
            </ul>
        </li>

    </ul>
</div>

Answer 1

  $(function () {
        var url = window.location;
        const allLinks = document.querySelectorAll('.nav-item a');
        const currentLink = [...allLinks].filter(e => {
            return e.href == url;
        });

        if (currentLink.length > 0) { //this filter because some links are not from menu
            currentLink[0].classList.add("active");
          
            //currentLink[0].closest(".has-treeview").classList.add("active");
        }   
            var url2 = window.location;
            const allLinks2 = document.querySelectorAll('.nav-item.nav-item-submenu a');
            const currentLink2= [...allLinks2].filter(e => {
                return e.href == url2;
            });

            if (currentLink2.length > 0) { //this filter because some links are not from menu
                currentLink2[0].closest(".nav-item-submenu").classList.add("nav-item-open");   
                currentLink2[0].classList.add("active");
                currentLink2[0].closest(".nav-group-sub").style.display = "block";
            } 
        });

它就是这样工作的。脚本有错误吗？