在以display:none

时间:2018-08-21 12:13:36

标签: javascript css ajax combobox

我在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;
}

0 个答案:

没有答案