我在 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>
<asp:Localize ID="MinutesText" runat="server" Text="<%$ Resources:AntiVirus, AVRepl_Minutes %>"></asp:Localize>
<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();
问题是当我隐藏第一个面板时,第二个面板会跳到原来的位置。我想要的是第一个面板隐藏起来,第二个面板显示在它下面。
关于如何实现这一目标的任何想法?