使用jquery修改现有菜单以使子菜单

时间:2010-11-12 11:35:39

标签: jquery html css menu

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

<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的Item时,用户被取消到相应的URL并且然后显示子菜单,一旦用户移出不是的页面子项目关闭的topitem或任何子项。

我一直在尝试下面的jquery,但没有任何快乐......

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

显然,如果我的菜单结构中定义了另一个子菜单,那么显示/隐藏任何li.topitems及其兄弟姐妹都会产生连锁反应。

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

1 个答案:

答案 0 :(得分:0)

我不确定这只能在jQuery中完成,或者这是否是正确的举动。你绑定jquery函数的方式对我来说很好。

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

我不知道ASP,但在PHP中,使用if / else循环非常简单。在if循环中,您可以使条件成为通过ASP抓取的URL传递的变量。