0

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

<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 - 'LinkBut​​ton_Category'），命令参数用作填充第二个链接按钮（使用 Id - 'LinkBut​​ton_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(); 
   });
});

屏幕截图 - 我希望一次只有其中一个保持打开状态。 当我点击其中任何一个时，任何先前展开的列表都必须关闭。

4

1 回答 1

0

我相信这就是您正在寻找的：

    $(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>
于 2013-03-06T17:34:10.290 回答