如果是显示样式，则显示div如果显示样式为代码块，则不显示div

-1

先生我想设置div样式模块，如果div显示样式为none，并且如果div样式为block，则设置为none。我写这些代码，但它不工作该怎么办？如果是显示样式，则显示div如果显示样式为代码块，则不显示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'是可见的，它需要隐藏，如果隐藏然后显示它。

来源

2016-02-11 SUJOY ROY

拨动一类。 – epascarello

你可以在你的jsfiddle或codepen中添加你的代码。与问题？。 – Pbk1303

使用'else if'作为第二个'if'块。因为它现在是你的第一个'if'将最终将元素样式设置为'block'，并且第二个'if'将最终始终为真，因为它只是设置为'block' –

如果您有多个#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语句可能是更好的选择。

来源

2016-02-11 18:27:34

$（＃menu）'' ，认为你的意思是$（'＃menu'）'。 _“如果你有多个#menu元素，即使他们确实id必须是唯一的，id选择器也只会返回1个元素。你也正在执行'menuShow'而不是传递它。 –

<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>

来源

2016-02-11 18:29:43

document.getElementById("menu_element").style.display可以none或只是空字符串""：检查的jsfiddle这里：

jsfiddle

来源

2016-02-11 18:32:09 ImadOS

-1

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

来源

2016-02-11 18:33:06 WelshBoyZz

Uncaught TypeError：无法读取null的属性'css' –

var curr = document.getElementById（“＃menu_element”）;总是null.please检查你的代码 –

您可以只需添加&&！= NULL， – WelshBoyZz

尝试下面提及的样本。

<!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>

来源

2016-02-11 18:46:29

如果是显示样式，则显示div如果显示样式为代码块，则不显示div

回答

相关问题