jquery - ASP :panel hide and show and positioning

Question

我在一个 div 中有以下 2 个面板:

 <div id="interval" style="margin-top:12px; float: left; margin-left: 10px;">
                <div>
                    <asp:Panel id="FrequencyMinutes" style="margin-left: 10px; margin-top: 2px" runat="server">
                        <asp:DropDownList runat="server" DataSource="<%# Model.ScheduleIntervalList %>" SelectedValue="<%# Model.SelectedScheduleInterval %>" OnSelectedIndexChanged="ScheduleInterval_SelectedIndexChanged" ID="AVContentPollingFrequencyDropDownList">            
                        </asp:DropDownList> &nbsp;
                        <asp:Localize ID="MinutesText" runat="server" Text="<%$ Resources:AntiVirus, AVRepl_Minutes %>"></asp:Localize>&nbsp;
                        <br />
                    </asp:Panel>
                    <asp:Panel id="TimePicker" style="margin-top: 2px; margin-left: 10px; min-width: 80%" runat="server">
                        <telerik:RadTimePicker Skin="Office2007" ID="StartTimeRadTimePicker" Width="15em" runat="server" OnSelectedDateChanged="StartTime_Changed" AutoPostBack="True" SelectedDate="<%# Model.ScheduleDateUpdated %>">
                            <DateInput ID="TimeInputTextBox" runat="server">
                            </DateInput>
                            <TimeView ID="TimeView" ShowHeader="false" Columns="6" Interval="0:30" runat="server" Visible="True">
                            </TimeView>
                        </telerik:RadTimePicker>
                        <asp:CustomValidator ID="RequiredTimeValidator" runat="server" Display="None" 
                        OnServerValidate="ValidateScheduledDateTime" ErrorMessage="<%$ Resources:Console, StartTimeNotValid %>">
                            <asp:Image ID="Image1" runat="server" SkinID="ValidationErrorSkin" ToolTip="<%$ Resources:Console, StartTimeNotValid %>" />
                        </asp:CustomValidator>
                    </asp:Panel>
                </div>
            </div>      

然后我让 JQuery 根据在单选按钮列表中选择的列表项来显示和隐藏这些面板:

$("#<%=pollingFrequencyRadioButtonList.ClientID%> input:radio").change(function() {
            if (this.checked) {
                if (this.value == "True") {
                    $("#" + "<%= FrequencyMinutes.ClientID %>").hide();
                    $("#" + "<%= TimePicker.ClientID %>").show();
                }
                else {
                    $("#" + "<%= FrequencyMinutes.ClientID %>").show();
                    $("#" + "<%= TimePicker.ClientID %>").hide();
                }
            }
        }).filter(":checked").change();

问题是，当我隐藏第一个面板时，第二个面板跳起来代替它。我想要的是第一个面板隐藏，第二个面板显示在它下面。

关于如何实现这一点有什么想法吗？

Answer 1

不使用 .hide()，它将元素从流中移除 (display:none)，而是更改元素的可见性。

使用

.css('visibility', 'hidden'); //for hide
.css('visibility', 'visible'); //for show