C# 折叠面板javascript问题

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

---

使用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工具箱控件。当然，您还必须将.panel声明为

display:none在CSS中。还要注意的是，为了有效地使用“next”函数，您可能必须去掉标签周围的表。您还只需要一个标签即可来回更改其文本：

 <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文件）：


.小组{
显示：无；
}
$（文档）.ready（函数（）{
$（“.toggle”）.toggle（函数（）{
$（此）.text（“折叠”）；
$（此）.next（.panel”）.slideDown（“快速”）；
}，函数（）{
$（此）.text（“展开”）；
$（this.next（.panel”）.slideUp（“fast”）；
});
});
展开
一些文本

使用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工具箱控件。当然，您还必须将.panel声明为
display:none在CSS中。还要注意的是，为了有效地使用“next”函数，您可能必须去掉标签周围的表。您还只需要一个标签即可来回更改其文本：

 <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文件）：


.小组{
显示：无；
}
$（文档）.ready（函数（）{
$（“.toggle”）.toggle（函数（）{
$（此）.text（“折叠”）；
$（此）.next（.panel”）.slideDown（“快速”）；
}，函数（）{
$（此）.text（“展开”）；
$（this.next（.panel”）.slideUp（“fast”）；
});
});
展开
一些文本

我使用本页中的示例成功地进行了折叠：

我只是用

.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>


$（文档）.ready（函数（）{
//使用类msg_body切换组件网
$（“.msg_head”）。单击（函数（）{
$（this）.next（“.msg_body”）.slideToggle（600）；
});
});
主题
废话废话。
我使用本页中的示例成功地进行了折叠：

我只是用

.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>


$（文档）.ready（函数（）{
//使用类msg_body切换组件网
$（“.msg_head”）。单击（函数（）{
$（this）.next（“.msg_body”）.slideToggle（600）；
});
});
主题
废话废话。
我编辑了我的代码。我对Jquery有一点了解，但我做错了什么？当我点击按钮时，它只是提交页面。如果你使用的是链接，你必须禁用链接的默认功能。尝试使用标记而不是链接，或者使用标准链接。我不认为您使用此链接向服务器发送信息，对吗？ps：您可以通过将css设置为
光标：指针，将标记伪装为链接：）我不应该调用那些函数，而应该使用扩展来代替我使用的链接吗？我编辑了我的代码。我对Jquery有一点了解，但我做错了什么？当我点击按钮时，它只是提交页面。如果你使用的是链接，你必须禁用链接的默认功能。尝试使用标记而不是链接，或者使用标准链接。我不认为您使用此链接向服务器发送信息，对吗？ps：您可以通过将css设置为
光标：指针，将标记伪装为链接：）除了我使用的链接之外，我是否应该以某种方式调用这些函数呢？另外，您可能需要更新到jquery的最新版本，即1.3.2，您可能还需要更新到jquery的最新版本，即1.3.2