为什么 style.display = "none";不适用于响应式导航栏

Question

w3_close() 方法在移动设备上工作得很好，但在桌面上它不起作用。我该如何解决这个问题？

function w3_open() {
  console.log('open')
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  console.log('close')
  document.getElementById("mySidebar").style.display = "none";
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left" style="width:300px; overflow: hidden;" id="mySidebar">
  <button onclick="w3_close()" class="w3-bar-item w3-large">Close &times;</button>
  <iframe width="100%" height="100%" style="overflow: hidden;" id='xx'></iframe>

</div>
<div class="w3-Sand">
  <button class="w3-button w3-Sand w3-xlarge" onclick="w3_open()">☰</button>

</div>
<div class="w3-container">
  <div id="root"></div>
</div>

感谢您的宝贵时间

Answer 1

原来是设置显示 .w3-sidebar.w3-collapse { display: block!important; } 在 w3.css 中，因此即使您将其更改为“阻止”或“无”，它也不会影响任何内容。

另外，你需要使用element.setAttribute('style', 'something')而不是element.style.display。

以下是我为您编写的代码。 ` 函数 w3_open() { console.log('打开') document.getElementById("mySidebar").setAttribute("style", "width:300px; overflow: hidden; display: block !important;"); }

函数 w3_close() { console.log('关闭') document.getElementById("mySidebar").setAttribute("style", "width:300px; overflow: hidden; display: none !important;"); } `