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 with panel1 id = div2 with 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，当有很多重复的函数时，它会非常方便。

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

3 个答案: