javascript - 响应式设计 - 如何切换菜单的可见性

Question

更新

我有一个 new post here使用 jsfiddles 和更清晰的问题。

---

我正在尝试使用响应式设计原则来适应不断变化的屏幕尺寸。当浏览器宽度下降到一个范围内。还有其他 div 调整大小，但此代码已简化。

当单击菜单按钮时，js 代码运行以通过更改其显示属性来切换菜单 div (main-nav-vert)。

当浏览器宽度缩小时，按钮出现和菜单隐藏时，一切都很好。

然后当点击切换按钮时，菜单会短暂可见...然后又自动消失。我已经验证隐藏 div 的代码没有运行 (.display = 'none')。菜单是否因为 CSS 代码始终处于事件状态而再次隐藏？如果是这样，我该如何完成这项任务？我正在寻找纯 js 答案，请不要使用 jQuery。谢谢。

CSS

/* When screen shrinks to this range, hide Menu, display Menu button   */
@media (max-width: 697px) and (min-width: 320px) {
    .div_menu_toggle{
        display: block;
    }
    .main-nav-vert{
        display: none;
    }
    
}

JS

<script type="text/javascript">
function showmenu() {
    var mainnavvert = getElementsByClassName('main-nav-vert');
    var i, s, len = mainnavvert.length;
    for (i = 0; i < len; ++i) {
        if (i in mainnavvert) {
        // toggle the menu
            mainnavvert[i].style.display = 'block';
        } else {
            mainnavvert[i].style.display = 'none';
        }
    }
}

function getElementsByClassName(className) {
    if (document.getElementsByClassName) {
        return document.getElementsByClassName(className);
    } else {
        return document.querySelectorAll('.' + className);
    }
}
</script>

Answer 1

*未测试，但我猜您只需要一个单独的类来显示:无和显示: block ；

然后更改类，而不是样式。像

 if (i in mainnavvert) {
        // toggle the menu
            mainnavvert[i].className = "show-me";
        } else {
            mainnavvert[i].className = "hide-me";
        }
 }