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

将您的button更改为div并从手风琴中删除width:100%。这是一个小提琴：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页面中使用按钮可能很麻烦，因为它们在某些情况下往往会导致回发。

Answer 2

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

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

2 个答案: