アコーディオン垂直メニューバーが

Question

を隠し、私はhttp://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol

を参照して、アコーディオン垂直メニューバーを作成した私は、ボタンの上にサブメニューが表示されます]をクリックし、問題に直面していますが、それはクリックイベントであるため、ページがリフレッシュされ、ページが更新されると、サブメニューが再び非表示になります。この問題は私を大変悩ましています。助けてください。このメニューバーは、プロジェクトのASP.NET、C＃用です。

<div id="aside"> 

    <button class="accordion">Registration</button> 
    <div class="panel"> 
     <ul class="submenu"> 
      <li><a href="NewRegister.aspx">Register</a></li> 
      <li><a href="OldRegistration.aspx">Old Register</a></li>    
     </ul> 
    </div> 

    <button class="accordion">Configuration</button> 
    <div class="panel"> 
     <ul class="submenu"> 
      <li><a href="NewRegister.aspx">Register</a></li> 
      <li><a href="OldRegistration.aspx">Old Register</a></li>  
     </ul> 
    </div> 

    <button class="accordion">Reports</button> 
    <div id="foo" class="panel"> 
     <ul class="submenu"> 
      <li><a href="NewRegister.aspx">Register</a></li> 
      <li><a href="OldRegistration.aspx">Old Register</a></li>  
     </ul> 
    </div> 
    <!-- cd-accordion-menu --> 

</div> 

<script type="text/javascript"> 
    var acc = document.getElementsByClassName("accordion"); 
    var i; 

    for (i = 0; i < acc.length; i++) { 
     acc[i].onclick = function() { 
      this.classList.toggle("active"); 
      var panel = this.nextElementSibling; 
      if (panel.style.maxHeight) { 
       panel.style.maxHeight = null; 
      } else { 
       panel.style.maxHeight = panel.scrollHeight + 'px'; 
      } 
     } 
    } 
</script> 

Answer 1

S 'の divにS' のあなたの buttonを変更し、アコーディオンから width:100%を削除

。ここではフィドルです：ASP.NETページのボタンを使用してhttps://jsfiddle.net/062ut3oL/

HTML

<div id="aside"> 

    <div class="accordion">Registration</div> 
    <div class="panel"> 
     <ul class="submenu"> 
      <li><a href="NewRegister.aspx">Register</a></li> 
      <li><a href="OldRegistration.aspx">Old Register</a></li>    
     </ul> 
    </div> 
    ... 

CSS

.accordion { 
    background-color: #eee; 
    color: #444; 
    cursor: pointer; 
    padding: 18px; 
    border: none; 
    text-align: left; 
    outline: none; 
    font-size: 15px; 
    transition: 0.4s; 
} 

説明

は、彼らのように面倒なことができポストを引き起こす傾向がある状況によっては戻ってくる。

Answer 2

localStorageに現在のページとロードページをJavaScriptで保存してみてください。この情報を読み、クラス（例：選択済み）を音声入力メニューに追加してください。