Question

我正在尝试创建一个带有嵌套转发器和链接按钮的下拉菜单。

<asp:Repeater ID="Repeater1" runat="server">
            <HeaderTemplate>
                <ul>
            </HeaderTemplate>
            <ItemTemplate>
                <li>
                    <asp:LinkButton ID="LinkButton_Category" runat="server" Text='<%#Eval("cat") %>'
                    OnCommand="LinkButton_Category_Command" CommandName="Category" 
                    CommandArgument='<%#Eval("catid") %>'></asp:LinkButton>
                <asp:Repeater ID="Repeater2" runat="server">
                    <HeaderTemplate>
                        <ul>
                    </HeaderTemplate>

                    <ItemTemplate>
                        <li>
                            <asp:LinkButton ID="LinkButton_UseClass" runat="server" Text='<%#Eval("useclass") %>'
                            OnCommand="LinkButton_UseClass_Command" CommandName="UseClass" 
                            CommandArgument='<%#Eval("UcId") %>'></asp:LinkButton>
                        </li>
                    </ItemTemplate>
                    <FooterTemplate>
                        </ul>
                    </FooterTemplate>
                </asp:Repeater>
                </li>
            </ItemTemplate>
            <FooterTemplate>
                </ul>
            </FooterTemplate>
        </asp:Repeater>

当单击第一个链接按钮（带有Id - 'LinkButton_Category'）时，命令参数用作填充第二个链接按钮的输入（带有Id - 'LinkButton_UseClass'）。我需要以下拉菜单的方式实现此功能，并具有向上和向下滚动功能。任何帮助将不胜感激。我可以填充链接按钮，但需要滚动功能的帮助。单击的链接按钮必须保持打开状态，直到单击下一个项目。

修改

使用JQuery实现下拉菜单的代码

$(document).ready(function () { 
   $("#nav li").click( function () { 
      var sibling = $(this).find("a").next(); 
      sibling.show(); 
   }, 
   function () { 
      var sibling = $(this).find("a").next(); 
      sibling.hide(); 
   });
});

screen shot - i want only one of them to stay open at a time. when i click on any one of them, any previously expanded list has to close.

Answer 1

我相信这就是你要找的东西：

    $(document).ready(function () {
        $("#nav li").each(function (index) {
            var sibling = $(this).find("a").next();
            sibling.hide();
        });
        $("#nav li").click(function () {
            $("#nav li").each(function (index) {
                var sibling = $(this).find("a").next();
                sibling.hide();
            });
            var sibling = $(this).find("a").next();
            sibling.show();
        });
    });

修改

以下是转发器的输出：

<body> <form id="form1" runat="server"> <div id="nav"> <ul> <li><a href="#">Alpha</a> <ul> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> <li><a href="#">D</a></li> </ul> </li> <li><a href="#">Numeric</a> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </li> </ul> </div> </form> </body>

带链接按钮的嵌套转发器控件

1 个答案: