Question

我在第3个手风琴面板中有一个表格。单击“提交”按钮后，如果验证码条目不匹配，页面将重新加载并显示一条消息，说明＆＃34;请再试一次，确保输入了正确的验证码＆＃34;。但是当页面重新加载时，所有的手风琴面板都是关闭的。如果发生这种情况，我需要第三个面板保持打开（或任何打开的面板）。是否有javascript可以处理这个或者更好的打开工具提示/弹出消息？如果是这样，我在哪里可以找到相应的代码？

<%@ Language=VBScript%>
<% response.buffer=true%>
<% 
Dim strrandom
Randomize
Random_Number_Min = 7825874
Random_Number_Max = 487985487
Random_Number = Int(((Random_Number_Max-Random_Number_Min+1) * Rnd) + Random_Number_Min)
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
.one {
    border: 1px solid #f00;
    width:100px; 
    font: italic; 
    text-decoration: line-through; 
    color:#4ba698;
    font-size:11pt;
}
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;
}

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: 500px;
}
</style>
</head>
<body>

<h2>Animated Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p><a href="#" class="close">Close</a></p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p><a href="#" class="close">Close</a></p>
</div>

<button class="accordion">Section 3</button>
<div id="foo" class="panel">
  <form action="tools_send_mail.asp" method="POST" name="FormName" id="frmSGroups" >
    <%Response.write request.querystring("message")%>
    <table id="request" width="600" border="0" cellspacing="0" cellpadding="10" style="font-size:9pt">
      <tbody>
        <tr>
          <td width="33%" valign="top">Name<br>
            <input type="text" size="20" name="Name" maxlength="30" tabindex="8"></td>
          <td colspan="3" valign="top">Email<br>
            <input type="text" size="48" name="Email" maxlength="50" tabindex="9"></td>
        </tr>
        <tr>
          <td valign="top">Address<br>
            <input type="text" size="20" name="address" maxlength="30" tabindex="4"></td>
          <td width="33%" valign="top">City<br>
            <input type="text" size="20" name="City" maxlength="20" tabindex="5"></td>
          <td width="58" valign="top">State<br>
            <input type="text" size="2" name="State" maxlength="2" tabindex="6"></td>
          <td width="108" valign="top">Zip<br>
            <input type="text" size="9" name="Zip_Code" maxlength="11" tabindex="7"></td>
        </tr>
        <tr>
          <td colspan="2" valign="top">For verification purposes, please enter the numbers you see below:
            <div align="right" class="one">
              <% Response.Write Random_Number %>
            </div></td>
          <td colspan="2" valign="top"><input type="text" name="Code" id="Code" size="20" maxlength="9" tabindex="17" required></td>
        </tr>
        <tr>
          <td colspan="4" valign="top" ><input name="random_num" type="hidden" id="random_num" value="<% Response.Write Random_Number %>">
            <%Response.write request.querystring("message")%></td>
        </tr>
        <tr>
          <td colspan="4"><input name="submit" type="submit" class="btn btnGold" value="SUBMIT >>" border="0" tabindex="18"></td>
        </tr>
      </tbody>
    </table>
  </form>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>

</body>
</html>

如何在回发后保持js手风琴面板状态？

0 个答案: