为什么样式显示 = "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.css中的.w3-sidebar.w3-collapse { display: block!important; }，所以即使您将其更改为"block"或"none"，它也不会影响任何内容。

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

下面是我为您编写的代码。`函数w3_open(({console.log("打开"(document.getElementById("mySidebar"(.setAttribute("样式"，"宽度：300px；溢出：隐藏；显示：块！重要；"(；}

函数w3_close(({控制台.logdocument.getElementById("mySidebar"(.setAttribute("样式"，"宽度：300px；溢出：隐藏；显示：无！重要；"(；}`