在中继器项目模板中显示隐藏 div答案

【问题标题】：Show Hide Div's in Repeater Item Template在中继器项目模板中显示隐藏 div
【发布时间】：2011-01-07 01:59:19
【问题描述】：

我在中继器的每个中继器行中显示摘要和详细客户信息 - 在中继器内部。

摘要的东西是它自己的div：(id="divHistory_Summary)。细节的东西在它自己的div：(id="divHistory_details")

details div默认隐藏，内联样式：display: none;

<asp:Repeater ID="RepeaterCustHistory" runat="server">
                <ItemTemplate>

                <div id="divHistory_Summary" class="cust_summary" style="width: 100%; cursor: pointer" >
                     <div id="divTicketNumber" style="display: inline; float: left;">
                          <u><strong>Ticket ID:</strong> <asp:Label ID="lblCustHelpDeskTicketId" runat="server" Text='<%# Eval("HelpDesk_id") %>' /></u>
                     </div>  

                      <div id="divProblem" style="display: inline; float: left; padding-left: 10px;">
                         <strong>Problem:</strong> <asp:Label ID="lblProblem" runat="server" Text='<%# Eval("HelpDesk_problem") %>' />
                     </div>

                     <div id="divStatus" style="display: inline; float: left; padding-left: 10px;">
                         <strong>Status:</strong> <asp:Label ID="Label1" runat="server" Text='<%# Eval("HelpDesk_name") %>' />
                     </div>

                  </div>

                  <div id="divHistory_details" class="cust_details" style=" width: 100%; float: left; display: none;  ">
                      <strong>Solution:</strong> <asp:Label ID="lblSolution" runat="server" Text='<%#Eval("HelpDesk_solution") %>' ></asp:Label>
                </div>

             </ItemTemplate>
          <SeparatorTemplate>
             <hr />
          </SeparatorTemplate>
    <FooterTemplate>
   </FooterTemplate>

    </asp:Repeater>

在我的 aspx 页面底部我有我的 jquery：

 <script src='<%= ResolveUrl("~/Scripts/jquery-1.4.1.js") %>' type="text/javascript" ></script> 
 <script type="text/javascript">

        $(document).ready(function () {
             $(".cust_details").hide();
             $(".cust_summary").click(function () {
                $(this).next(".cust_details").slideToggle(100);
             });
         });

  </script>

我的应用程序的头部没有 jquery.js 文件，所以我希望可以在这里调用脚本。这个应用有很多嵌套的母版页，不知道把调用放在哪个母版页上。

页面加载，转发器填充，详细信息被隐藏。单击摘要 div 时，没有任何反应 - 不会显示详细信息。

有没有人知道如何让这个显示/隐藏 div 像这样工作？谢谢！

我正在使用 VS2010，框架 2.0，C#

【问题讨论】：

您是否检查过是否发生了任何可能阻止您的代码运行的 JavaScript 错误？乍一看，您的代码看起来不错。

标签： asp.net jquery repeater

【解决方案1】：

试试这个：

 $(this).nextAll('div[class="cust_details"]').eq(0).slideToggle(100);

我已经进行了快速测试，它似乎可以正常工作。

【讨论】：

【解决方案2】：

试试这个：

<script type="text/javascript">

        $(document).ready(function () {
             $(".cust_details").hide();
             $(".cust_summary").click(function () {
            $(this).nextAll('div[class="cust_details"]').eq(0).slideToggle(100);
             });
         });

</script>

【讨论】：