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

时间:2013-03-04 16:03:24

标签: c#-4.0 drop-down-menu repeater asplinkbutton

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

<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(); 
   });
}); 

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.

1 个答案:

答案 0 :(得分: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>