如何在关闭其他子菜单时一次打开一个子菜单

时间:2019-05-07 22:40:12

标签: javascript html

我一直试图一次打开一个子菜单,但是我似乎找不到我的问题!环顾四周,但还没有发现任何可以帮助我的东西 并且还必须在页面加载时保持关闭状态 ---- HTML ---

HTML PART

       window.addEventListener('load', function(){


   var acc = document.getElementsByClassName("niveau1");
   var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        hideAll();

        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
    }
}

function hideAll() {
    for (i = 0; i < acc.length; i++) {
        acc[i].classList.toggle("active", false);
        acc[i].nextElementSibling.classList.toggle("show", false);
    }
}

});

1 个答案:

答案 0 :(得分:0)

编辑:此解决方案在重新加载时不会保持关闭状态,现在可以了

如果可以使用JQuery,则可以使用JQuery的.accordain函数。找到Here

例如

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. 
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. 
    </p>
  </div>
</div>


<script>
  $( function() {
    $( "#accordion" ).accordion({  
        active: false,
        collapsible: true 
    });
  } );
  </script>

JSFiddle

请注意,这要求您拥有<div>而不是<li>