我在asp:panel中有一个Ajax ComboBox。面板上分配了我的CssClass =“ hide”,其中包括“ display:none”。
用户可以单击触发JavaScript函数的另一个元素,该元素将在CssClass =“ hide”和CssClass =“ show”之间切换面板(“ show”包括“ width:100%”,这会导致面板中的所有控件在组合框上显示箭头图像除外
如果我将面板设置为以CssClass =“ show”开始生活,则所有显示正确。然后,我可以使用该函数将其更改为CssClass =“ hide”,然后再更改回CssClass =“ show”,一切看起来仍然正确!
感谢您的帮助。
---------我的ASPX --------
<ajaxToolkit:TabContainer ID="tabcontainerProject" runat="server" Width="100%" ActiveTabIndex="1">
<ajaxToolkit:TabPanel ID="tpnlUpdateInformation" runat="server" HeaderText="Update Information">
<ContentTemplate>
<span id="spanPositions" class="lnkempty" onclick="togglepnlPositions();">Project Team</span>
<br />
<asp:Panel ID="pnlPositions" runat="server" cssclass="hide">
<ajaxToolkit:ComboBox ID="cbxOwner" runat="server"
DataSourceID="sqlOwner" DataTextField="Owner" DataValueField="Owner"
DropDownStyle="DropDown" AutoCompleteMode="SuggestAppend"
ItemInsertLocation="OrdinalText" CssClass="AquaStyle"
AutoPostBack="false">
</ajaxToolkit:ComboBox>
</asp:Panel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
---------我的JavaScript --------
var stickypnlPositions = 0
function togglepnlPositions() {
pnlPositions = document.getElementById('MainContent_tabcontainerProject_tpnlUpdateInformation_pnlPositions');
if (stickypnlPositions === 0) {
pnlPositions.setAttribute('class', 'show');
stickypnlPositions = 1;
} else {
pnlPositions.setAttribute('class', 'hide');
stickypnlPositions = 0;
}
}
---------我的CSS --------
.AquaStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input {
margin: 0;
background-image: url(../Images/Ajax/Aqua/aqua-bg.gif);
background-position: top left;
border: 0px none;
padding: 2px 0px 0px 8px;
/* font-size: 11px; */
font-size: 13px;
height: 17px;
width: 150px;
}
.AquaStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button {
background-image: url(../Images/Ajax/Aqua/aqua-arrow.gif);
background-position: top left;
border: 0px none;
height: 19px;
width: 19px;
vertical-align: top;
}
.AquaStyle .ajax__combobox_itemlist {
border-color: #000000;
background-color: #FFFFFF;
}