CSS Onclick关闭不显示不起作用，响应式设计

问题描述

我正在关注w3教程，并在此处探索响应式设计模板（有关详细信息，请参见源代码）：https://www.w3schools.com/w3css/tryw3css_templates_analytics.htm

我想编辑侧边栏，以便始终显示关闭按钮，并在单击时关闭侧边栏。根据目前的设计，这仅适用于中型和小型窗户。

我试图修改代码以删除隐藏的类（因此它将始终显示）。但是，单击该功能不会关闭边栏：

发件人：

<a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu">
  <i class="fa fa-remove fa-fw"></i>&nbsp; Close Menu
</a>

收件人：

<a href="#" class="w3-bar-item w3-button w3-padding w3-dark-grey w3-hover-black" onclick="w3_close();return false;" title="close side menu">
  <i class="fa fa-remove fa-fw"></i>&nbsp; Close Menu
</a>

我在这里缺少一些非常基本的东西。但是我已经花了足够长的时间弄弄我想指出正确的方向。代码是正确的，我猜这可能是DOM或冒泡的问题，还是基本的设计编辑？谢谢！

解决方法

似乎有一个!important媒体查询CSS规则可能会阻止您的样式生效：

@media (min-width: 993px)
.w3-sidebar.w3-collapse {
     display: block!important;
}

我做了一个document.querySelector("#mySidebar").style.display = "none"，但没有任何效果。您可以删除该!important规则，或者以其他方式解决该问题...