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

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>

- user4221591

---

你在使用更新面板吗？ - Amit Mishra

@AmitMishra 不，我没有使用更新面板。 - user4221591

Answer 1

将您的按钮更改为div并从手风琴中删除width:100％。这是一个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;
}

说明

在ASP.NET页面中使用按钮可能会出现问题，因为它们在某些情况下往往会导致回发。

- Michael Coxon

Answer 2

尝试将当前页面保存在本地存储中，在JavaScript中读取此信息并向菜单中的选项添加类（例如selected）。

- Gabriele Mantovani