Question

我想设置一个div的样式，如果它的显示样式为none则阻止，如果它的样式是块，则设置为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＆＃39; menu_element＆＃39;是可见的，它需要隐藏，如果它被隐藏，则必须显示它。

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");
    }
    }

显示div，如果它是显示样式none＆amp;隐藏，如果显示样式是阻止

5 个答案: