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

Question

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

    <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 切换方法。

有人可以帮我吗？

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

Answer 1

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

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

Answer 2

在每个面板周围添加一个 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');
     });
});

Answer 3

jQuery 会让它变得非常简单：

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

此外，您可以使用类而不是 ID，这在有很多重复功能时会非常方便。