在 asp.net 中构建一个可折叠和可扩展的面板答案

【问题标题】：Building a collapsible and expandable panel in asp.net在 asp.net 中构建一个可折叠和可扩展的面板
【发布时间】：2023-03-05 22:52:01
【问题描述】：

我有两个面板的以下代码：

    <asp:Panel runat="server" class="sectionLabels">
<asp:Label runat="server" Text="DetailsForm"></asp:Label>
</asp:Panel>

<asp:Panel ID="Details" runat="server" CssClass="panelStyle">
<table>
<tr>
<td class="columnA">
<asp:Label runat="server" Text="Name"></asp:Label>
</td>
<td>
<asp:TextBox runat="server" ID="Name"></asp:TextBox>
</td>
</tr>
<tr>
<td class="columnA">
<asp:Label runat="server" Text="Contact"></asp:Label>
</td>
<td>
<asp:TextBox runat="server" ID="ContactDetails"></asp:TextBox>
</td>
</tr>
</table>
</asp:Panel>

我尝试了 AJAX CollapsiblePanel 方法和 jQuery 切换方法。

有人可以帮我解决这个问题吗？

基本上当第一个面板被点击时，第二个面板应该被隐藏或交替显示。

【问题讨论】：

标签： jquery html asp.net css panel

【解决方案1】：

jQuery 会让它变得非常简单：

$(document).ready(function () {
        $("#contentPanel").hide();
        $("#headerPanel").click(function () {
            $(this).next("#contentPanel").slideToggle("medium");
        });
    });

此外，您可以使用类而不是 ID，这在有大量重复功能时会派上用场。

【讨论】：

【解决方案2】：

试试这个，这里#panel1 和#panel2 是你的面板标签的ID

$('#panel1, #panel2').click(function(){
     if($('#panel1').is(':visible'))
     {
       $('#panel1').hide();
       $('#panel2').show();
     }
     else if($('#panel2').is(':visible'))
     {
       $('#panel2').hide();
       $('#panel1').show();
     }
   });

【讨论】：

您将面板ID更改为面板1和面板2，您可以分享一个JSFiddle链接吗？它在我身边工作。

【解决方案3】：

在每个面板周围添加一个 div 并将 ID 设置为两者

id=div1 与 panel1 id=div2 和 panel2

$("document").ready(function(){
     //hide div2 onload
     $("#div2").hide();

     $("#div1").click(function(){
         $("div2").slideDown('normal');
         $("div1").slideup('normal');
     });
     $("#div2").click(function(){
         $("div1").slideDown('normal');
         $("div2").slideup('normal');
     });
});

【讨论】：