使用 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 以 ?Agent 而不是 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 与父级相关联，因此我调整了another SO answer 以涵盖您的特定用例：

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>

这对您有好处吗，请确保也为其他链接的答案投票。