Question

更新

我有一个new post here的jsfiddles和一个更清晰的问题。如果这篇文章可以删除。那会更好。

我正在尝试使用响应式设计原则来适应不断变化的屏幕尺寸。我有CSS会隐藏div（main-nav-vert）中包含的垂直菜单，并在浏览器宽度落入范围时显示div（div_menu_toggle）中包含的“Menu”按钮。还有其他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

*未经测试，但我猜你只需要一个单独的类进行显示：none和display：block;

然后改变课程，而不是风格。

之类的东西

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

Answer 2

根据当前状态切换显示。这样的事情可能有用。

for (i = 0; i < len; ++i) {
    var menu = mainnavvert[i];
    if (menu.style.display === 'block') {
        menu.style.display = 'none';
    } else {
        menu.style.display = 'block';
    }
}

Answer 3

您需要使用新课程设置有效/无效切换菜单。

<强> 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;
       }
       .main-nav-vert.active{
           display: block;
       }

    }

<强> 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
            if(mainnavvert[i].style.display == "block")
               removeClass(mainnavvert[i]);
            }
            else {
               addClass(mainnavvert[i]);
            }
        }
    }
}

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

function addClass(ele) {
    var classString = ele.className; 
    var newClass = classString.concat(" active"); 
    ele.className = newClass; 
}

function removeClass(ele)
{
    [].forEach.call(ele, function(el) {
       el.classList.remove("active");
    });
}

}）;

正如你想要的纯javascript一样，但是如果你用jquery做代码就会非常顺利和优化我不知道为什么你使用for循环如果只有1个元素那么你可以忽略循环。

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

3 个答案: