0

我有一个可折叠的面板扩展器。我对扩展器没有任何问题。但是，我有一个打开面板的链接，我想要另一个链接说折叠来关闭它。我想隐藏一个显示一个 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>
4

2 回答 2

2

这很容易用 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 工具箱控件。当然，您还必须display: none;在 CSS 中声明 .panel 。另请注意，您可能必须摆脱标签周围的表格才能有效地使用“下一个”功能。您还只需要一个可以来回更改其文本的标签：

 <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>
于 2009-07-31T16:30:45.590 回答
1

我使用此页面中的示例成功折叠： 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>
于 2009-07-31T17:11:35.230 回答