0

我在 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();

问题是当我隐藏第一个面板时，第二个面板会跳到原来的位置。我想要的是第一个面板隐藏起来，第二个面板显示在它下面。

关于如何实现这一目标的任何想法？

4

1 回答 1

3

更改项目的可见性，而不是使用.hide()将元素从流中取出的使用 ( )。display:none

利用

.css('visibility', 'hidden'); //for hide
.css('visibility', 'visible'); //for show
于 2013-07-26T11:06:32.520 回答