使用 jquery 修改现有菜单以具有子菜单答案

【问题标题】：modifying an existing menu to have submenus using jquery使用 jquery 修改现有菜单以具有子菜单
【发布时间】：2010-11-12 11:35:39
【问题描述】：

我目前在母版页中定义了以下菜单结构：

<asp:ContentPlaceHolder ID="SubNavigation" runat="server">
    <ul>
    <li><%= RenderLink("item 1", "/item1/", null, null) %></li>
    <li><%= RenderLink("item 2", "/item2/blah/", null, "nofollow")%></li>
    <li><%= RenderLink("item 3", "/item3/blah/", null, "nofollow") %></li>
    </ul>
</asp:ContentPlaceHolder>

当人们在网站上导航时，会调用 RenderLink 方法并检查用户是否在所请求的页面上，并将其呈现为带有特定 css 的标签。

现在我想像这样添加一个子菜单：

<asp:ContentPlaceHolder ID="SubNavigation" runat="server">
    <ul>
    <li><%= RenderLink("item 1", "/item1/", null, null) %></li>
    <li><%= RenderLink("item 2", "/item2/blah/", null, "nofollow")%></li>
    <li><%= RenderLink("item 3", "/item3/blah/", null, "nofollow") %></li>
        <li class="topitem">
            <%= RenderLink("Item 4", "/Item4/blah/", null, null) %>
            <ul class="sublist">
                <li class="subitem">
                    <%= RenderLink("subitem4a", "/subitem4a/blah/", null, null) %></li>
                <li class="subitem">
                    <%= RenderLink("subitem4b", "/subitem4b/blah/", null, null) %></li>
                <li class="subitem">
                    <%= RenderLink("subitem4c", "/subitem4c/blah/", null, null) %></li>
            </ul>
        </li>
    </ul>

我正在尝试使用 jquery，以便当用户单击具有类 topitem 的项目时，用户将被定向到相应的 URL，然后显示子菜单，一旦用户移出没有的页面关闭子菜单的主题或任何子项。

我一直在尝试以下 jquery，但没有任何乐趣...

$(document).ready(function() {
    $('li.topitem > a:first-child').siblings().toggle();
});

显然，如果在我的菜单结构中定义了另一个子菜单，这会产生显示/隐藏任何 li.topitems 及其同级的连锁反应。

在 jQuery 中处理这个问题的最佳方法是什么？

【问题讨论】：

标签： jquery html css menu

【解决方案1】：

我不确定这是否可以仅在 jQuery 中完成，或者这是否是正确的举措。您绑定 jquery 函数的方式对我来说看起来不错。

如果您希望子菜单出现在某个页面上，您应该通过某种类型的循环来运行列表元素，以检查您是否在正确的页面上。您在此处发布的代码基本上只是 HTML 标记。

我不了解 ASP，但在 PHP 中，使用 if/else 循环非常简单。在 if 循环中，您可以将条件设置为通过 ASP 抓取的 URL 传递的变量。

【讨论】：