我一直试图一次打开一个子菜单,但是我似乎找不到我的问题!环顾四周,但还没有发现任何可以帮助我的东西 并且还必须在页面加载时保持关闭状态 ---- HTML ---
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);
}
}
});
答案 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>
请注意,这要求您拥有<div>
而不是<li>