Question

我在我的项目中使用bootstrap崩溃，在崩溃中我有一些按钮和下拉列表但是当我点击任何按钮或更改下拉列表索引时，发生回发并且崩溃得到了未崩溃，我该如何阻止它？这是我的代码

 <h4><a href="#" data-toggle="collapse" data-target="#div_search" style="font-weight: bold;">Search Training Profile</a><br />
                </h4>
                <div id="div_search" class="collapse" style="overflow-x: auto;">
                    <table class="table table-bordered table-striped">
                        <tr>
                            <td>Employee Name</td>
                            <td>
                                <asp:TextBox runat="server" ID="txt_name"></asp:TextBox>
                                <span class="err">optional</span>

                            </td>
                            <td>e.g First Name, Middle Name, Last Name</td>
                        </tr>
                        <tr>
                            <td>Designation</td>
                            <td><span class="err"></span>
                                <asp:DropDownList runat="server" ID="DDL_Desig" OnSelectedIndexChanged="DDL_Desig_SelectedIndexChanged" AutoPostBack="true">
                                </asp:DropDownList>
                                <span class="err">optional</span>
                            </td>
                            <td>
                                 <asp:TextBox runat="server" ID="txt_desig" ReadOnly="true"></asp:TextBox>
                                <asp:Button Text="Clear" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>Location</td>
                            <td>
                                 <asp:DropDownList runat="server" ID="DDL_Loc" OnSelectedIndexChanged="DDL_Loc_SelectedIndexChanged" AutoPostBack="true">
                                    <asp:ListItem>Select</asp:ListItem>
                                </asp:DropDownList>
                                <span class="err">optional</span>
                                </td>

                            <td>
                                 <asp:TextBox runat="server" ID="txt_loc" ReadOnly="true"></asp:TextBox>
                                <asp:Button Text="Clear" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td>Division</td>
                            <td>
                                 <asp:DropDownList runat="server" ID="DDL_Divis" OnSelectedIndexChanged="DDL_Divis_SelectedIndexChanged" AutoPostBack="true">
                                </asp:DropDownList>
                                <span class="err"> optional </span>

                            </td>
                            <td>
                                  <asp:TextBox runat="server" ID="txt_divis" ReadOnly="true"></asp:TextBox>
                                <asp:Button Text="Clear" runat="server" />
                                </td>
                        </tr>
                        <tr>
                            <td>Department</td>
                            <td>
                                <asp:TextBox runat="server" ID="tx"></asp:TextBox>
                                <span class="err">optional</span></td>
                            <td>e.g ISD, MKT, HR etc</td>
                        </tr>
                        <tr>
                            <td>Filter By</td>
                            <td>
                                <asp:DropDownList runat="server" ID="DDL_Assc">
                                </asp:DropDownList>
                            </td>
                            <td>e.g OLP, SOLC, MAF, etc</td>
                        </tr>
                        <tr>

                            <td colspan="3">&nbsp;</td>
                        </tr>
                        <tr>
                            <td colspan="3" style="text-align:center;">
                                <asp:Button Text="Search" runat="server" CssClass="btn" />
                                <asp:Button Text="Reset" runat="server"  CssClass="btn" />
                            </td>
                        </tr>
                    </table>

                </div>

Answer 1

创建公共变量

string state = "collapse";

在回发或下拉更改期间将值设置为

state = "expand";

和aspx页面使用如下： -

<div id="div_search" class='<%= state %>' style="overflow-x: auto;">

Answer 2

Aditya的回答最初帮助了我，是一个很好的解决方案。随着我的代码在更新面板中包含div并使折叠div包含一些日历控件导致回发刷新网格中的数据，我提出了另一种我认为值得共享的解决方案，因为它只是在服务器端处理。 / p>

<asp:Panel ID="pnlDateRange" ClientIDMode="Static" runat="server" CssClass="collapse col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <div id="divFrom" class="col-xs-12 col-sm-12 col-md-2 col-md-offset-4 col-lg-2 col-lg-offset-4">
     <asp:Calendar ID="cStartDate" runat="server" CssClass="calendar" Font-Size="X-Small"
                                DayNameFormat="FirstTwoLetters" DayHeaderStyle-Font-Bold="false"
                                TitleStyle-Font-Bold="true" TitleStyle-Font-Size="Small" Caption="From"
                                OnSelectionChanged="cStartDate_SelectionChanged">
                                <SelectedDayStyle Font-Bold="true" />
                                <OtherMonthDayStyle ForeColor="SlateGray" />
                            </asp:Calendar>
                        </div>
      <div id="divTo" class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
          <asp:Calendar ID="cEndDate" runat="server" CssClass="calendar" Font-Size="X-Small"
                                DayNameFormat="FirstTwoLetters" DayHeaderStyle-Font-Bold="false"
                                TitleStyle-Font-Bold="true" TitleStyle-Font-Size="Small" Caption="To"
                                OnSelectionChanged="cEndDate_SelectionChanged">
                                <SelectedDayStyle Font-Bold="true" />
                                <OtherMonthDayStyle ForeColor="SlateGray" />
               </asp:Calendar>
            </div>
       </asp:Panel>

该控件最初是普通的，应用了相同的类，它是崩溃目标。在服务器端的c＃中，我在代码加载运行的所有情况下都定义了一个私有布尔变量设置为true。在OnPreRender活动中，我这样做：

if (_collapseRange)
{
    pnlDateRange.CssClass = pnlDateRange.CssClass.Replace("collapse in", "collapse");
}
else
{
    if (!pnlDateRange.CssClass.Contains("collapse in"))
    {
        pnlDateRange.CssClass = pnlDateRange.CssClass.Replace("collapse", "collapse in");
    }
}

Answer 3

我知道这是一个老问题，但是我是这样做的。也许不是最好的方法，但是对我有用。只需在需要时调用该方法即可。

当您有很多崩溃时，它会变得有点混乱。

protected void Page_Load(object sender, EventArgs e)
{

    if (!Page.IsPostBack)
    {
        GetTextForInfoboxFrontPage();


        multiCollapseExample1.Attributes["class"] = "collapse";
        annualCollapse.Attributes["class"] = "collapse";
        infoBox.Attributes["class"] = "collapse";
    }
}


private void CollapseAllButAnnual()
{
    annualCollapse.Attributes["class"] = "collapse in";
    infoBox.Attributes["class"] = "collapse";
    logoUpload.Attributes["class"] = "collapse";
}

回发后阻止Bootstrap折叠切换

3 个答案: