时间戳

首页 > 解决方案 > 调整大小和按下按钮时无法隐藏菜单

javascript - 调整大小和按下按钮时无法隐藏菜单

问题描述

我正在使用这段代码：

@media screen and (max-width: 850px) {  
#side-menu {  
        display: none;  
    }  
    button {  
        display: block;  
    }  
}

当我调整窗口大小时隐藏我的侧面菜单并显示一个按钮。我还想在按下按钮时显示和隐藏菜单。为此，我正在使用以下代码：

function showMenu() {
  var sideMenu = document.getElementById("side-menu");
  if (sideMenu.style.display === "none") {
    sideMenu.style.display = "block";
  } 
  else {
    sideMenu.style.display = "none";
  }
}

当我用按钮隐藏时，当我调整窗口大小时菜单不会重新出现。我相信这是因为javascript将主要样式更改为显示：无，因此一旦超出范围，它就会应用主要样式。现在它是 display: none 所以它不会再次出现。我怎样才能让它按我的意图工作？此外，由于某种原因，需要单击两次才能显示菜单。

<ul id="side-menu"> 
  <li><a href="#">example1</a></li>
  <li><a href="#">example2</a></li>
  <li><a href="#">example3</a></li>
  <li><a href="#">example4</a></li>
</ul>

html 以备不时之需。

标签： javascripthtmlcss

解决方案

您必须先检查 display === "block" 是否可以解决多次点击问题。

包括媒体查询以管理大于 850 像素的窗口宽度以显示列表和隐藏按钮。

编辑：更新片段以使用原始问题中提供的列表。

function showMenu() {
  var sideMenu = document.getElementById("side-menu");
  if (sideMenu.style.display === "block") {
    sideMenu.style.display = "none";
  } 
  else {
    sideMenu.style.display = "block";
  }
}
@media screen and (min-width: 850px) {  
#side-menu {  
        display: block;  
    }  
    button {  
        display: none;  
    }  
}


@media screen and (max-width: 850px) {  
#side-menu {  
        display: none;  
    }  
    button {  
        display: block;  
    }  
}
<div id="side-menu">
<ul> 
  <li><a href="#">example1</a></li>
  <li><a href="#">example2</a></li>
  <li><a href="#">example3</a></li>
  <li><a href="#">example4</a></li>
</ul>
</div>
<button onclick="showMenu()">click me</button>

推荐阅读