Question

我有一个可折叠的面板扩展器。我对扩展器没有任何问题。但是，我有一个链接打开面板，我想要另一个链接说崩溃关闭它。我想隐藏一个show一个javascript端。问题是它只适用于第一行而不适用于其他行，因为我没有获得唯一ID或其他内容。我还没有找到合理的答案。我通过获取父元素尝试了jquery，但我没有成功。我该怎么办？

答案：

<asp:TemplateField HeaderText="Lng Descr" SortExpression="LongDescription">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("LongDescription") %>' TextMode ="MultiLine" Rows="5" ></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>     
                <table>                  
                    <tr id="expand" style="display:">   
                        <td>    
                            <asp:Label ID="Label3" runat="server" ForeColor="Blue"><u></u></asp:Label>
                        </td>
                    </tr>
                </table>
                <asp:Panel ID="Panel1" runat="server" >
                    <table>
                    <tr>
                    <td>
                        <%#Eval("LongDescription")%>
                    </td>
                    </tr>
                    </table>
                </asp:Panel>
                <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" 
                 TargetControlID = "Panel1"
                 CollapsedSize="0"
                ExpandedSize="50"
                Collapsed="true" 
                ExpandControlID="Label3"
                CollapseControlID="Label3"
                AutoCollapse="false" 
                Scrollcontents="false" 
                collapsedText="<u>Expand"
                ExpandDirection="Vertical"
                ExpandedText = "<u>Collapse"
                TextLabelID="Label3" />
                </ItemTemplate>
            </asp:TemplateField>

Answer 1

使用jQuery可以轻松完成。在你的面板中，声明一个cssclass，比如说“panel”，并在你的标签上声明一个css类，比如说“toggle”。你的jQuery将是：

$(document).ready(function(){
    $(".toggle").toggle(function (){
        $(this).text("Collapse");
        $(this).next(".panel").slideDown("fast");
    },function () {
        $(this).text("Expand");
        $(this).next(".panel").slideUp("fast");
    });
});

您也可以放弃ajax工具箱控件。当然，您还必须在CSS中将.panel声明为display: none;。另请注意，为了有效地使用“下一个”功能，您可能必须摆脱标签周围的表格。您还只需要一个可以来回更改文本的标签：

 <asp:LinkButton ID="view" runat="server" text="Expand" cssclass="toggle"> 
 <!-- You may alternatively use a standard link here or even a <p> tag, like this
 <p class="toggle">Expand</p>
 -->
 <asp:Panel ID="Panel1" runat="server" cssclass="panel">
       <table>
                <tr>
                <td>
                    <%#Eval("LongDescription")%>
                </td>
                </tr>
       </table>
 </asp:Panel>

修改

这是我用来为你运行的确切代码。请注意，我通常会将脚本和CSS拉出来并将它们放在一个单独的文件中，但是出于所有意图和目的，这是有效的（如果您使用的是1.3.2 jquery文件）：

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> .panel { display: none; } </style> <script type="text/javascript"> $(document).ready(function() { $(".toggle").toggle(function() { $(this).text("Collapse"); $(this).next(".panel").slideDown("fast"); }, function() { $(this).text("Expand"); $(this).next(".panel").slideUp("fast"); }); }); </script> </head> <body> <form id="form1" runat="server"> <p class="toggle" style="cursor:pointer;color:blue"><u>Expand</u></p> <asp:Panel ID="Panel1" runat="server" CssClass="panel" > <table> <tr> <td> <p>some text</p> </td> </tr> </table> </asp:Panel> </form> </body> </html>

Answer 2

我使用此页面中的示例进行了折叠成功： http://roshanbh.com.np/2008/03/expandable-collapsible-toggle-pane-jquery.html

我只是用

.msg_head {
    cursor: pointer;
}

对于CSS。

以下是我脚本中的内容。

<script type="text/javascript" id="js">
  $(document).ready(function() {

      //toggle the componenet with class msg_body
      $(".msg_head").click(function() {
         $(this).next(".msg_body").slideToggle(600);
      });
  });
</script>

<h2 class="msg_head">Subject<h2>

<div class="msg_body">
    Blah blah blah.
</div>

折叠面板javascript问题

2 个答案: