打开下拉菜单时,我试图下推导航栏中的元素。我可以通过在底部添加边距来将其向下推,但是当我关闭下拉菜单时,边距不会消失/不会变为0。
这是相关的标记
<ul id="menu" class="navbar-nav">
<li class="nav-item">...</li>
<li class="nav-item">...</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-haspopup="true" href="#">open dropdown</a>
<ul class="dropdown-menu" role="menu">
<li class="nav-item">...</li>
<li class="nav-item">...</li>
<li class="nav-item">...</li>
<li class="nav-item">...</li>
<li class="nav-item">...</li>
<li class="nav-item">...</li>
</ul>
</li>
<li class="nav-item">...</li>
<li class="nav-item">...</li>
</ul>
相关JS:
"use strict";
document.addEventListener("DOMContentLoaded", function(event) {
let footerNavElements = document.getElementById("menu").children;
if (window.innerWidth < 576) {
for (var i = 0; i < footerNavElements.length; i++) {
if(footerNavElements[i].classList.contains("dropdown")){
footerNavElements[i].addEventListener("click", function(){
if(this.classList.contains("show") === false){
this.style.marginBottom = '221px';
}
else if (this.classList.contains("show") === true){
this.style.marginBottom = '0';
}
});
}
}
}
});
在下拉列表打开时添加show类
我要添加221像素,原因是移动设备上下拉菜单的高度恒定。
if (window.innerWidth < 576)
也在那里,因此仅适用于移动设备。
我尝试过的事情:
回顾一下当前行为:打开下拉菜单时,它也会按照我的预期添加边距。但是当我关闭下拉菜单时,边距留在那里。
想要的行为:打开下拉菜单时,请在底部添加一个边距,关闭下拉菜单时,请删除底部的边距
我想念什么?