Javascript手風琴不保留擴展版

Question

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

Answer 1

看一看下面的小提琴。

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