如果显示样式为无，则显示 div；如果显示样式为块，则隐藏

Question

我想将一个div的显示样式设置为block，如果它的显示样式为none，如果它的样式为block，则设置为none。我写了这段代码，但它不起作用。该怎么办？

 <style>
    * {
        margin: 0px;
        padding: 0px;
    }

    #menu {
        width: 100%;
        height: 40px;
        z-index: 100;
        cursor: pointer;
        background: url(images/menu.jpg) center no-repeat;
        margin: auto;
    }

    #line {
        margin-top: 19px;
        position: absolute;
        left: 5%;
        z-index: -1;
        width: 90%;
    }

    #menu_element {
        height: 240px;
        background: #06C;
        display: none;
        width: 100%;
    }

    @keyframes menu_animate {
        from {
            height: 0px;
        }
        to {
            height: 240px;
        }
    }

    @keyframes menu_animate_reverse {
        from {
            height: 240px;
        }
        to {
            height: 0px;
        }
    }
</style>

<script>
    function menuShow() {
        if (document.getElementById("menu_element").style.display == "none") {
            document.getElementById("menu_element").style.display = "block";
            document.getElementById("menu_element").style.animationName = "menu_animate";
            document.getElementById("menu_element").style.animationDuration = "1s";
        }
        if (document.getElementById("menu_element").style.display == "block") {
            document.getElementById("menu_element").style.display = "none";
            document.getElementById("menu_element").style.animationName = "menu_animate_reverse";
            document.getElementById("menu_element").style.animationDuration = "1s";
        }
    }
</script>`

<div id="menu" onClick="menuShow();"></div>
<div id="menu_element"></div>

我的代码有什么问题？因此，在单击 id 菜单后，如果 id ‘menu_element’ 可见，则需要隐藏它，如果它是隐藏的，则必须显示它。

原文由 SUJOY ROY 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您有多个 #menu 元素，则可以完全删除 onclick。使用 JQuery…

 $(document).ready(function() {
    $(#menu).click(menuShow());
}

function menuShow() {
    if ($(this).css('display')=='block') {
        $(this).css('display', 'none');
    } else if ($(this).css('display')==('none') {
        $(this).css('display', 'block');
    }
}

如果您有更多要处理的显示案例，则 switch 语句可能是更好的选择。

原文由 Kaitlyn Brown 发布，翻译遵循 CC BY-SA 3.0 许可协议