Javascript 对于网格大小，汉堡菜单可见 1.介绍

我正在使用Bootstrap3编程我的第一个网站。我使用Html、Css和JavaScript

2.问题 我制作了一个汉堡包菜单，它应该只在超小型移动网格（1-768px）中可见。菜单在这个超小的网格中工作得非常完美。但当我放大浏览器窗口时，汉堡菜单在小网格（769-992px）中始终可见

我试着摆弄我的Javascript，寻找答案，但没有成功

3.我的代码

功能切换\u可见性（id）{
var e=document.getElementById（'hamburgermenu'）；
如果（e.style.display=='block'）
e、 style.display='none'；
其他的
e、 style.display='block'；
}
#汉堡菜单{
显示：无；
位置：绝对位置；
z指数：1000000；
身高：100%；
宽度：100%；
边缘顶部：50px；
背景色：rgba（0,0,0,7）；
}

内联样式（style=“display:block；”）仍然存在，因此#hamburgermenu{display:none；}是无用的

有很多解决方案，最简单的是使用#hamburgermenu{display:none！important；}

内联样式（style=“display:block；”）设置mediaquery，因此#hamburgermenu{display:none；}没有用处

---

有很多解决方案，最简单的是使用#hamburgermenu{display:none！important；}设置mediaquery

使用bootsrap时，不必手动处理可见性问题。 Bootstrap有特殊的助手类，可以将这些类分配给html元素，以便在响应应用程序中管理它们的可见性状态

您可以在此处阅读：

您如何管理小屏幕上可见的汉堡菜单图标和大屏幕上不可见的汉堡菜单图标的示例如下：

<button class="visible-xs hidden-sm hidden-md hidden-lg">My Button</button>

---

使用bootsrap时，不必手动处理可见性问题。 Bootstrap有特殊的助手类，可以将这些类分配给html元素，以便在响应应用程序中管理它们的可见性状态

您可以在此处阅读：

您如何管理小屏幕上可见的汉堡菜单图标和大屏幕上不可见的汉堡菜单图标的示例如下：

<button class="visible-xs hidden-sm hidden-md hidden-lg">My Button</button>

---

非常感谢。成功了。感谢您花时间解释您的解决方案背后的原因！很高兴我能帮忙。别忘了接受答案，让别人知道它帮助了你谢谢！成功了。感谢您花时间解释您的解决方案背后的原因！很高兴我能帮忙。别忘了接受答案，让别人知道它对你有帮助

function toggle_visibility(id) {
  var e = document.getElementById('hamburgermenu');
  if(e.getAttribute('class') == 'my-class my-visible-class') 
      e.setAttribute('class', 'my-class')
  else
      e.setAttribute('class', 'my-class my-visible-class')
  }
} // you also missed this closing bracket