手风琴垂直菜单栏页面刷新子菜单隐藏

Question

I've created a accordion vertical menu bar with reference to http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol

I am facing a problem that on button click the submenu appears but since it is a click event the page refreshes and on page refresh the submenu hides again. This problem is annoying me very much, please help. This menu bar is for the project 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

Change your button 's to div 's and remove the width:100% from the accordion. Here is a fiddle: 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;
}

Explanation

Using buttons in a ASP.NET page can be troublesome as they tend to cause a postback under some circumstances.

Answer 2

尝试在localStorage中保存当前页面并在javascript中加载页面阅读此信息并在菜单中添加一个类（例如选中）。