为什么“ Display：none”属性无法正常工作

Question

我想为导航栏创建一个下拉超级菜单，该菜单可以在大型设备上展开菜单，而在小型设备上最小化菜单。我将提供到目前为止的照片以及我要实现的目标，

我试图隐藏div，不显示任何内容，定位绝对位置并将其移动-9999px并在JS上使用.remove()，但到目前为止没有任何效果。

if (window.innerWidth <= 986)
  $('.lateral').addClass("hide");
else
  $('.lateral').removeClass("hide");
$(window).resize(function() {
  if ($(window).width() <= 986)
    $('.lateral').addClass("hide");
  else
    $('.lateral').removeClass("hide");
});

.lateral {
  position: relative;
  width: 98%;
  height: 28%;
  float: left;
  color: white;
}

.hide {
  display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lateral">
  <div class="container">
    <ul class="navbar-nav nav mr-auto vertical-menu">
      <li class="navbar-header">
      </li>
      <li id="NavDropdown" class="navbar-collapse collapse vertical-menu
    ">
        <p>produs</p>
      </li>
      <li id="NavDropdown" class="navbar-collapse collapse vertical-menu ">
        <p>produs</p>
      </li>
  </div>
  </ul>
  </nav>

我希望我的代码删除整个div，而不仅仅是删除其中的文本。

Answer 1

我不认为问题出在display: none上。

代码中存在一些问题：

1. 由于某些元素在其子级之前被关闭，因此HTML树已损坏。
2. CSS代码应在<style></style>标记内。
3. JavaScript缺少花括号。从理论上讲，它应该可以工作，但是如果不添加代码，则代码更容易出错。

// Adjusted to 600 for better display in demo.
const changeSize = 600; 
if($(window).width() <= changeSize) {
  $('.lateral').addClass("hide");
} else {
  $('.lateral').removeClass("hide");
  $(window).resize(() => {
    if ($(window).width() <= changeSize) {
      $('.lateral').addClass("hide");
    } else {
      $('.lateral').removeClass("hide");
    }
  });
}

.lateral{
      position:relative;
      width:98%;
      height:28%;
      float:left;
      color: red;
    }
    
    .hide {
       display: none !important;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="lateral">
  <div class="container">
    <ul class="navbar-nav nav mr-auto vertical-menu">
      <li class="navbar-header">Menu</li>
      <li id="NavDropdown" class="navbar-collapse collapse vertical-menu"><p>produs</p></li>
      <li id="NavDropdown" class="navbar-collapse collapse vertical-menu "><p>produs</p></li>
    </ul>
   </div>
</div>

<div>
Content
</div>