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

时间:2019-03-06 11:22:06

标签: javascript drop-down-menu

打开下拉菜单时,我试图下推导航栏中的元素。我可以通过在底部添加边距来将其向下推,但是当我关闭下拉菜单时,边距不会消失/不会变为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 个答案:

没有答案