2013-03-04 50 views
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(); 
    }); 
}); 

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.

+0

不知道问题是什么。你问如何添加下拉列表? – 2013-03-04 17:07:56

+0

我正在寻找使用linkbuttons和中继器的滑动下拉菜单。我能够填充链接按钮,但点击时不会保持打开状态。 – developerhere 2013-03-05 06:24:56

+0

您可以将幻灯片菜单的代码添加到您的问题中吗?另外,如果您可以添加页面的屏幕截图,它可以帮助我们准确理解您想要实现的目标。 – 2013-03-05 15:15:36

回答

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> 
+0

如果我将id =“nav”指定给外部ul,则子列表不会保持打开状态。只要我点击它们,它们就会关闭。如果我将id =“nav”指定给内部ul,则内部和外部列表将保持同时打开状态。 (与原始问题相同),该怎么办? – developerhere 2013-03-07 14:17:34

+0

尝试使用具有id =“nav” – 2013-03-07 14:31:30

+0

的div的中继器进行包装。打开和关闭,只要我点击它们。 – developerhere 2013-03-07 14:56:55