Question

打开下拉菜单时，我试图下推导航栏中的元素。我可以通过在底部添加边距来将其向下推，但是当我关闭下拉菜单时，边距不会消失/不会变为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)也在那里，因此仅适用于移动设备。

我尝试过的事情：

我没有检查元素是否具有“ show”类（否则进行检查），而是尝试删除了style属性，但是它也不起作用
在纯CSS中执行此操作，但老实说，在js中执行此操作似乎更简单（我尝试将下拉菜单更改为position：relative；但是随后我需要更改下一个元素的上边距，当菜单是打开的，但是当它关闭时，边距留在那里，我不知道如何在CSS中进行检查）

回顾一下当前行为：打开下拉菜单时，它也会按照我的预期添加边距。但是当我关闭下拉菜单时，边距留在那里。

想要的行为：打开下拉菜单时，请在底部添加一个边距，关闭下拉菜单时，请删除底部的边距

我想念什么？

下拉菜单可将元素向下推，但不会使其关闭

0 个答案: