如果显示样式为none，则显示div；如果显示样式为block，则隐藏

Question

我想将div的样式设置为阻止（如果其显示样式为无），而将其设置为无（如果样式为阻止）。 我写了这段代码，但是没有用。 该怎么办？

<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'可见，则需要将其隐藏；如果已隐藏，则必须将其显示。

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语句可能是更好的选择。

Answer 2

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


<script>function menuShow(){
debugger
  var curr=document.getElementById("menu_element");
    if(curr.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";
    }
    else if(curr.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>

</head>
<body>   
 <div id="menu" onClick="menuShow();">
Click me to hide
</div>
<div id="menu_element" style="background-color:red;display:block;" >
I Love this code.
</div>
</body>
</html>

Answer 3

document.getElementById("menu_element").style.display可以为none也可以为空字符串"" ：在此处检查jsfiddle：

jsfiddle

Answer 4

请尝试以下提到的示例。

 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Menu Show or Hide by java script</title> <script type="text/javascript"> function showOrHide(){ var melement = document.getElementById('menu_element'); if(melement.style.display == 'none'){ melement.style.display = 'block'; } else{ melement.style.display = 'none'; } } </script> </head> <body> <div id="menu" onclick="showOrHide();" style="width:100px; height:100px; border:1px solid red;"> </div> <div id="menu_element" style="width:100px; height:100px; border:1px solid red;"> </div> </body> </html>

Answer 5

function menuShow(){
    if(document.getElementById("menu_element").css('display') == "none"){
      document.getElementById("menu_element").css("background-color", "block");
      document.getElementById("menu_element").css("animationName", "menu_animate");
      document.getElementById("menu_element").css("animationDuration", "1s");
    }
    if(document.getElementById("menu_element").css('display') == "block"){
      document.getElementById("menu_element").css("background-color", "none");
      document.getElementById("menu_element").css("animationName", "menu_animate_reverse");
      document.getElementById("menu_element").css("animationDuration", "1s");
    }
    }

如果显示样式为none，则显示div；如果显示样式为block，则隐藏

问题描述

5 个解决方案

解决方案1
3 2016-02-11 18:27:34

解决方案2
0 2016-02-11 18:29:43

解决方案3
0 2016-02-11 18:32:09

解决方案4
0 2016-02-11 18:46:29

解决方案5
-1 2016-02-11 18:33:06

如果显示样式为none，则显示div；如果显示样式为block，则隐藏

问题描述

5 个解决方案

解决方案1 3 2016-02-11 18:27:34

解决方案2 0 2016-02-11 18:29:43

解决方案3 0 2016-02-11 18:32:09

解决方案4 0 2016-02-11 18:46:29

解决方案5 -1 2016-02-11 18:33:06

解决方案1
3 2016-02-11 18:27:34

解决方案2
0 2016-02-11 18:29:43

解决方案3
0 2016-02-11 18:32:09

解决方案4
0 2016-02-11 18:46:29

解决方案5
-1 2016-02-11 18:33:06