我对脚本有点新手,但一直在尝试找到适合我的响应式菜单解决方案的解决方案。我见过其他人也有类似的问题,但他们的菜单似乎使用了不同的方法。
这是我的代码:
HTML:
function toggle_visibility(id) {
var e = document.getElementById('menu-items');
if ($(e).css('display') == 'block') {
$(e).slideUp('fast');
} else {
$(e).slideDown('fast');
}
};
.mobile-menu {
display: none
}
@media only screen and (max-width: 680px) {
#menu-items {
display: none
}
.mobile-menu {
display: block;
cursor: pointer;
}
}
<a onclick="toggle_visibility('menu-items');" class="mobile-menu">Menu</a>
<div id="menu-items">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<!--#menu-items-->
菜单效果很好,但我遇到的主要问题是,当用户减小窗口大小以显示响应式菜单切换,然后使用切换打开然后关闭菜单时,菜单永远不会返回到正常 View 当窗口大小调整回桌面 View 时。
奇怪的是,如果用户在移动 View 中保持响应式菜单打开并将大小调整回桌面,它确实会返回,但如果用户关闭菜单则不会返回。
我想在这个菜单上做的唯一一件事是,如果用户单击页面中除菜单之外的任何其他位置,菜单将关闭。目前,用户必须单击菜单切换链接才能将其关闭。
任何帮助将不胜感激!!!
非常感谢。
最佳答案
试试这个:
@media only screen and (min-width: 680px) {
#menu-items {
display: block
}
.mobile-menu {
display: none;
cursor: pointer;
}
}
关于javascript - 响应式菜单在窗口大小调整时消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31986728/