將下拉鏈接的父級列表項設置為可通過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，當我選擇Configuration下拉菜單下的AccountCodes時，它應僅將父列表項設置為活動狀態。 但是，目錄父級也設置為活動狀態。 我不確定如何直接選擇它。

另外，由於URL的結構，我無法繼續使用endWith。 是否存在基於url設置活動類的替代方法？ 當前，如果我選擇AccountCodes或Branches，它將正確地將Configuration下拉項設置為active。 但是，如果選擇代理，則由於URL以？Agent而不是Users結尾的URL，因此什么也沒有選擇

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

這對您有好處嗎？請確保也對其他鏈接的答案進行投票。