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

Javascript手风琴不会扩展

1 个答案: