[英]Javascript Accordion Doesnt Stay Expanded
在ASP.NET/C#網站的其中一頁上,我正在使用Javascript手風琴包含顯示數據庫信息的GridView控件。 當我構建頁面並在本地對其進行測試時,我需要雙擊手風琴對其進行任何操作,它確實很粗略,通常甚至根本無法打開。 當我發布網站並在IE或Chrome上進入我的域時,它要么根本無法打開,要么會打開幾秒鍾然后崩潰。 任何人都知道為什么會發生這種情況嗎? 這是代碼:
的HTML:
<button class="accordion">Cases</button>
<div class="panel">
<p>
<asp:GridView ID="gvCases" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="CaseID" DataSourceID="sdsCases" ForeColor="#333333" GridLines="None" AllowSorting="True">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="CaseID" HeaderText="CaseID" ReadOnly="True" SortExpression="CaseID" />
<asp:BoundField DataField="Brand" HeaderText="Brand" SortExpression="Brand" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="sdsCases" runat="server" ConnectionString="<%$ ConnectionStrings:HardwareConnectionString %>" SelectCommand="SELECT * FROM [Computer_Cases]"></asp:SqlDataSource>
</p>
</div>
CSS:
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\02795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2796";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 3000px;
}
看看下面的小提琴。
https://jsfiddle.net/varit05/4pxkfef5/
您的代碼運行正常。
似乎手風琴內部的視圖存在問題。
CSS:
#mainsection {
width:1200px;
margin:0 auto;
text-align: center;
}
#descriptionSection{
font-size: 22px;
}
#leftSide{
float: left;
width: 230px;
background-color: white;
text-align: left;
}
#rightSide{
float: right;
width: 970px;
background-color: white;
}
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\02795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2796";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: 0.6s ease-in-out;
opacity: 0;
}
div.panel.show {
opacity: 1;
max-height: 3000px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.