jquery 遍历 asp.net 菜单

Question

我觉得这应该是一项简单的任务，但我遇到了问题。我有一个包含在无序列表中的下拉菜单(由 asp.net 菜单控件生成)，并且我试图通过 jquery 向选定链接的父链接添加额外的突出显示。这是生成的 HTML:

<div id="MainMenu" class="mainMenuControl">
        <ul class="level1 static" role="menubar">
            <li class="static" role="menuitem"><a class="level1 static selected" href="/default.aspx">Home</a>
            </li>
            <li class="has-popup static" aria-haspopup="MainMenu:submenu:3" role="menuitem"><a
                class="level2 static" href="/store/prodcut.aspx">Product 1</a>
                <ul id="MainMenu:submenu:3" class="level3 dynamic">
                    <li class="dynamic" role="menuitem"><a class="level3 dynamic" href="/store/product/category1.aspx">
                        Category 1</a> </li>
                    <li class="dynamic" role="menuitem"><a class="level3 dynamic" href="/store/product/category2.aspx">
                        Category 2</a> </li>
                </ul>
            </li>
            <li class="has-popup static" aria-haspopup="MainMenu:submenu:10" role="menuitem"><a
                class="level2 static" href="/store/paymentoptions.aspx">Ministries</a>
                <ul id="MainMenu:submenu:10" class="level3 dynamic">
                    <li class="dynamic" role="menuitem"><a class="level3 dynamic" href="/store/paymentoptions/option1.aspx">
                        Option 1</a> </li>
                    <li class="dynamic" role="menuitem"><a class="level3 dynamic" href="/store/paymentoptions/option2.aspx">
                        Option 2</a> </li>
                </ul>
            </li>
        </ul>
    </div>

因此，无论当前用户位于哪个页面，相应的菜单链接都会“选择”该类。但是，如果它们位于主菜单选项之一的子页面上，我希望下拉菜单中的链接及其父链接都具有“选定”类。

我试图根据父/子 url 路径向链接添加类，但我遇到了问题，因为我在 asp.net 中使用 url 重写，以便任何尾随斜杠、默认文档(index.html、默认.aspx)或网址结尾(.html、.aspx 等)被删除。

我尝试过这个，但是，正如我所说，我无法让它工作:

$('.mainMenuControl ul a').each(function () {
            if ($(this).attr('href') == window.location.pathname) {
                $(this).addClass('selected');
                if ($(this).parent('li').parents('.mainMenuControl ul.level1 li').length) {
                    $(this).parent('li').parents('.mainMenuControl ul.level1 li').find('a.static').addClass('selected');
                }
            }
        });

如有任何建议，我们将不胜感激，谢谢!

Answer 1

为什么用 jQuery 来做呢？如果您使用母版页，您可以创建一个名为 lblMenu 的标签。

就像...

<div id="MainMenu" class="mainMenuControl">
  <asp:labelControl text = ""/>
</div>

然后创建一个类，该类接受您要选择的项目名称的覆盖。 在此类中为您的菜单构建 HTML，并且传递给它的选项将针对它们进行选择。

public string BuildMenu(string selected1, string Selected2)
StringBuilder sbMenu = new StringBuilder();

sbMenu.Append("<ul class="level1 static" role="menubar">");
sbMenu.Append .......

return sbMenu.ToString().replace(selected1, selected2);

在您的内容 page_load 事件上放置类似..

lblMenu.Text = className("<a class=""level1 static""","<a class="level1 static selected"");