gpt4 book ai didi

javascript - 汉堡菜单对于网格尺寸可见

转载 作者:行者123 更新时间:2023-11-28 05:17:21 25 4
gpt4 key购买 nike

1。简介

我正在使用 Bootstrap 3 编写我的第一个网站。我使用 Html、Css 和 JavaScript。

2。问题

我制作了一个汉堡菜单,该菜单只能在超小的移动网格(1-768px)中可见。菜单在这个超小的网格中完美运行。但是当我放大浏览器窗口时,汉堡菜单在小网格(769-992px)中保持可见。

我尝试摆弄我的 Javascript 并搜索答案,但没有成功。

Here is the visual representation of the problem!

3。我的代码

<html>
<head>
<script>
function toggle_visibility(id) {
var e = document.getElementById('hamburgermenu');
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>

<style>
#hamburgermenu {
display: none;
position: absolute;
z-index: 1000000;

height: 100%;
width: 100%;
margin-top: 50px;
background-color: rgba(0,0,0,.7);
}
</style>
</head>

<body>
<!-- HTML BUTTON FOR HIDE AND SHOW -->
<button onclick="toggle_visibility('hamburgermenu');">
<span class="glyphicon glyphicon-option-horizontal"></span>
</button>
<!-- HTML BUTTON FOR HIDE AND SHOW -->

<!-- HTML MOBILE MENU -->
<div id="hamburgermenu" >
<ul class="mobilemenu">
<li><a href="#">PROJECTEN</a></li>
<li><a href="#">SKILLSET</a></li>
<li><a href="#">STAGE</a></li>
<li><a href="#">OVER MIJ</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<!-- END HTML MOBILE MENU -->
</body>

最佳答案

内联样式 (style="display: block;") 仍然存在,因此 #hamburgermenu {display: none;} 毫无用处。

解决方案有很多,最简单的一个是使用 #hamburgermenu {display: none !important;} 设置媒体查询

关于javascript - 汉堡菜单对于网格尺寸可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40863630/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com