Question

我有一个aspx页面，其中包含许多可折叠面板，我希望用户一次只能展开一个 - 所以如果panel1展开，那么panel2和panel3会自动关闭。反正有吗？

<asp:button runat="server" id="btn1" text="test1"/>
<asp:button runat="server" id="btn2" text="test2"/>
<asp:button runat="server" id="btn3" text="test3"/>
<asp:penel id="pnl1" runat="server">Panel 1 content</panel>
<asp:CollapsiblePanelExtender ID="cpe1" runat="Server" TargetControlID="pnl1"
ExpandControlID="btn1" CollapseControlID="btn1" Collapsed="True"/>
<asp:penel id="pnl2" runat="server">Panel 2 content</panel>
<asp:CollapsiblePanelExtender ID="cpe2" runat="Server" TargetControlID="pnl2"
ExpandControlID="btn2" CollapseControlID="btn2" Collapsed="True"/>
<asp:penel id="pnl3" runat="server">Panel 3 content</panel>
<asp:CollapsiblePanelExtender ID="cpe3" runat="Server" TargetControlID="pnl3"
ExpandControlID="btn3" CollapseControlID="btn3" Collapsed="True"/>

Answer 1

一次打开一个面板首先给每个可折叠面板提供behaviorID，并使用javascript关闭OnClientClick事件上的所有其他当前内容。

<script type="text/javascript">
    function closePanel(con1,con2) {
    $find(con1)._doClose();
    $find(con2)._doClose();}
    </script>
    <asp:button OnClientClick="closePanel('colps2','colps3');" runat="server" id="btn1"     text="test1"/>
    <asp:button OnClientClick="closePanel('colps1','colps3');" runat="server" id="btn2" text="test2"/>
    <asp:button OnClientClick="closePanel('colps1','colps2');" runat="server" id="btn3" text="test3"/>
    <asp:penel id="pnl1" runat="server">Panel 1 content</panel>
    <asp:CollapsiblePanelExtender ID="cpe1" runat="Server" TargetControlID="pnl1"
    ExpandControlID="btn1" CollapseControlID="btn1" Collapsed="True"     BehaviorID="colps1"/>
    <asp:penel id="pnl2" runat="server">Panel 2 content</panel>
    <asp:CollapsiblePanelExtender ID="cpe2" runat="Server" TargetControlID="pnl2"
    ExpandControlID="btn2" CollapseControlID="btn2" Collapsed="True" BehaviorID="colps2"/>
    <asp:penel id="pnl3" runat="server">Panel 3 content</panel>
    <asp:CollapsiblePanelExtender ID="cpe3" runat="Server" TargetControlID="pnl3"
    ExpandControlID="btn3" CollapseControlID="btn3" Collapsed="True" BehaviorID="colps3"/>

asp.net中存在多个collapsiblepanel问题

1 个答案: