我正在使用以下 jquery 折叠 div:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
但是当我折叠 div 时,页面会调整大小并且页面的宽度会增加
<span class="fr expand-collapse-text">Click to collapse</span>
<span style="display: none;" class="fr expand-collapse-text initial-expand">Click to expand</span>
这就是我要崩溃的:
<div class="content-module">
<div class="content-module-heading cf">
<h3 class="fl">Table of content</h3>
<span class="fr expand-collapse-text">Click to collapse</span>
<span style="display: none;" class="fr expand-collapse-text initial-expand">Click to expand</span>
</div> <!-- end content-module-heading -->
<div class="content-module-main">
<asp:GridView ID="GridView1" runat="server" AllowPaging="True"
AutoGenerateColumns="False"
DataKeyNames="cnt_id" cssclass="table" Width="100%">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckUncheckAll" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox2" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Date To Send">
<EditItemTemplate>
<asp:TextBox ID="cnt_date_to_send" runat="server" Text='<%# Bind("cnt_date_to_send") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lbcnt_date_to_send" runat="server" Text='<%# Bind("cnt_date_to_send") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Created">
<EditItemTemplate>
<asp:TextBox ID="created" runat="server" Text='<%# Bind("created") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lbcreated" runat="server" Text='<%# Bind("created") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Content">
<EditItemTemplate>
<asp:TextBox ID="cnt_content" runat="server" Text='<%# Bind("cnt_content") %> ' CssClass="txtContent"/>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblcnt_content" runat="server" Text='<%# Bind("cnt_content") %>' CssClass="txtContent"></asp:Label>
</ItemTemplate>
<ItemStyle wrap="true" Width="400px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<a href="#" class="table-actions-button ic-table-edit"></a>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<a href="#" class="table-actions-button ic-table-delete"></a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
CSS:
div.content-module-main { padding: 1em; /* 16/16 */ }
table { margin-bottom: 1.25em; /* 20/16 */ }
table th {
background-color: #3D9DB3;
color: white;
text-transform: uppercase;
padding: 1.25em 0 1.25em 1.25em; /* 15/12 */
}
table tbody td {
padding: 0.833em 0 0.833em 1.25em; /* 10/12 15/12 */
border-left: 1px solid white;
border-right: 1px solid white;
border-bottom: 1px solid #f8f9fa;
}
/* Alternate table row */
table tbody tr:nth-child(odd) { background-color: #f8f9fa; }
/* Push the first cell to the right so it doesn't stick to the table border */
table td:first-child, table th:first-child {
width: 4em /* 48/12 */;
text-align: center;
padding: 0;
border: none;
border-bottom: 1px solid #f8f9fa;
}
table td:last-child, table th:last-child {
width: 7em; /* 84/12 */
text-align: center;
padding: 0;
}
table td.table-footer {
text-align: left;
vertical-align: middle;
padding-top: 1.25em /* 15/12 */;
border: none;
}
a.table-actions-button {
width: 1.25em;
height: 1.25em;
display: inline-block;
background-position: center center;
}
我怎样才能解决这个问题?
我正在使用带有 vb.net 的 asp.net