CSS 单击关闭（显示 none）不工作，响应式设计

Question

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

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

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

发件人：

<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 或冒泡问题，或基本设计编辑？谢谢！

Answer 1

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

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

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

CSS 单击关闭（显示 none）不工作，响应式设计

CSS Onclick Close (display none) Not Working, Responsive Design

html

javascript

css

w3c

sidebar