CSS Onclick Close (display none) 不工作，響應式設計

Question

我正在關注 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 或冒泡問題，或者是基本的設計編輯？ 謝謝！

Answer 1

似乎有一個!important媒體查詢 CSS 規則可能會阻止您的樣式生效：

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

我做了一個document.querySelector("#mySidebar").style.display = "none"並且沒有效果。 您可以刪除該!important規則或以其他方式解決它...