jquery遍历asp.net菜单答案

【问题标题】：jquery traversing an asp.net menujquery遍历asp.net菜单
【发布时间】：2012-02-08 00:47:26
【问题描述】：

我觉得这应该是一件容易的事，但我遇到了问题。我有一个包含在无序列表中的下拉菜单（由 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) 或 url 结尾（.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');
                }
            }
        });

任何建议将不胜感激，谢谢！

【问题讨论】：

标签： jquery asp.net

【解决方案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"");

【讨论】：