javascript - 如果显示样式为 block,则javascript显示 div,如果显示样式无&隐藏

  显示原文与译文双语对照的内容
69 0

如果div样式为 none,则将它的设置为 block,如果它的样式为 block,则将它的设置为无。 我写了这个代码,但它不工作。 怎么办?


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



我的代码有什么问题? 所以在单击,菜单之后,如果,'menu_element'是可以见的,则需要隐藏它,然后才能显示它。

时间: 原作者:

57 2

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

75 0

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



133 2

尝试 below 已经提到的示例。


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

document.getElementById("menu_element").style.display 可以是 none,也可以是空字符串 "": 检查 jsfiddle:

jsfiddle

原作者:
135 4

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


 }


 }



...