Установить элемент родительского списка раскрывающейся ссылки активным с помощью jQuery / JavaScript (ASP.NET)

Question

Это мое меню

<ul class="sidebar-menu" id="navigation-menu">
    <li class="active"><a class="nav-link" href="/"><i class="fas fa-home"></i><span>Home Page</span></a></li>
    <li class="nav-item dropdown">
        <a href="#" class="nav-link has-dropdown"><i class="fas fa-cog"></i><span>Configuration</span></a>
        <ul class="dropdown-menu">
            <li><a class="nav-link" href="/Configuration/AccountCodes">Account Codes</a></li>
            <li><a class="nav-link" href="/Configuration/Branches">Branches</a></li>
        </ul>
     </li>
     <li class="nav-item dropdown">
         <a href="#" class="nav-link has-dropdown"><i class="fas fa-person-booth"></i><span>Directory</span></a>
         <ul class="dropdown-menu">
             <li><a class="nav-link" href="/Directory/Users?Role=Administrator">Administrators</a></li>
             <li><a class="nav-link" href="/Directory/Users?Role=Manager">Managers</a></li>
             <li><a class="nav-link" href="/Directory/Users?Role=Agent">Agents</a></li>
         </ul>
     </li>
</ul>

Это мой Jquery, когда я выбираю AccountCodes, который находится в раскрывающемся списке Конфигурация, он должен только активировать родительский элемент списка.Однако родительский каталог также активен.Я не уверен, как выбрать его напрямую.

Кроме того, из-за структуры моего URL я не могу продолжать использовать endWith.Есть ли альтернативный метод установки активного класса на основе URL?В настоящее время, если я выбираю AccountCodes или Branches, он правильно устанавливает выпадающий элемент Configuration как активный.Однако, если я выберу агента, ничего не будет выбрано вообще, потому что его URL заканчивается на? Агент вместо Users

<script>
    $(document).ready(function () {
        var current = location.pathname;
        console.log(current);
        $("#navigation-menu a").each(function () {
            var $this = $(this);
            console.log($this.attr('href'));
            if ($this.attr('href').endsWith(current)) {
                console.log($this.parent());
                $this.parent().addClass('active');
                console.log("matched");
            }
        });
        if ($(".dropdown-menu li").hasClass("active")) {
            console.log("Yes");
            var $this = $(this);
            $(".dropdown-menu li").prev().parent().parent().addClass('active');
            console.log($(".dropdown-menu li").closest(".nav-item dropdown"));
        }
    });
</script>

Answer 1

Существует два способа пометить только родительскую ссылку как активную.

1.С jQuery

Преимущество этого заключается в том, что он будет совместим с любой серверной платформой.

<script>
    $(document).ready(function () {
        var current = location.pathname;
        console.log(current);
        $("#navigation-menu a").each(function () {
            var $this = $(this);
            var link = $this.attr('href');
            console.log(link);

            // Remove the query string parameters by finding their starting position
            var indexOfQueryString = link.lastIndexOf("?");
            link = link.substring(0, indexOfQueryString);

            if (link.endsWith(current)) {
                console.log("matched");
                if ($this.parent().parent().hasClass('.dropdown-menu')) {
                    var parentLink = $this.closest('.dropdown');
                    console.log("Setting parent link as active:", parentLink);
                    // Find the closest parent link and add active class
                    parentLink.addClass('active');
                } else {
                    console.log("Setting link as active: ", $this.parent());
                    $this.parent().addClass('active');
                }
            }
        });
    });
</script>

В этом случае, как вы уже упоминали, у вас возникли проблемы с присутствием ?Agentв ссылке - это то, что мы называем параметрами строки запроса , которые мы можем безопасно удалить с помощью поиска незакодированного знака вопроса.Это уже учтено в решении.

2.С ASP.NET MVC

Выполнение этого в бэкэнде было бы более надежным, и если пользователь отключил JavaScript, эта функция все равно будет работать на вашем сайте.Однако, как вы уже догадались, недостатком является то, что он зависит от платформы.

Существует множество способов решения этой проблемы.Для вашего конкретного варианта использования, поскольку ваши раскрывающиеся ссылки связаны с родителем по area, я адаптировал другой ответ SO , чтобы охватить ваш конкретный вариант использования:

public static string IsSelected(this HtmlHelper html, string area = "", string cssClass = "active")
{
    ViewContext viewContext = html.ViewContext;
    RouteValueDictionary routeValues = viewContext.RouteData.Values;
    string currentArea = routeValues["area"] as string;

    return area.Equals(currentArea) ? cssClass : String.Empty;
}

Затем используйте его следующим образом:

<ul class="sidebar-menu" id="navigation-menu">
    <li><a asp-area="" asp-controller="Home" asp-action="Index" class="nav-link"><i class="fas fa-home"></i><span>Home
                Page</span></a></li>
    <li class="nav-item dropdown @Html.IsSelected(area: "Configuration")">
        <a href="#" class="nav-link has-dropdown"><i class="fas fa-cog"></i><span>Configuration</span></a>
        <ul class="dropdown-menu">
            <li><a asp-area="Configuration" asp-controller="AccountCodes" asp-action="Index" class="nav-link">Account
                    Codes</a></li>
            <li><a asp-area="Configuration" asp-controller="Branches" asp-action="Index" class="nav-link">Branches</a>
            </li>
        </ul>
    </li>
    <li class="nav-item dropdown  @Html.IsSelected(area: "Directory")">
        <a href="#" class="nav-link has-dropdown"><i class="fas fa-person-booth"></i><span>Directory</span></a>
        <ul class="dropdown-menu">
            <li><a asp-area="Directory" asp-controller="Users" asp-action="Index" asp-route-Role="Administrator"
                    class="nav-link">Administrators</a></li>
            <li><a asp-area="Directory" asp-controller="Users" asp-action="Index" asp-route-Role="Manager"
                    class="nav-link">Managers</a></li>
            <li><a asp-area="Directory" asp-controller="Users" asp-action="Index" asp-route-Role="Agent"
                    class="nav-link">Agents</a></li>
        </ul>
    </li>
</ul>

Это может быть полезным для вас, пожалуйста, не забудьте также добавить другой связанный ответ.