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'是可以见的,则需要隐藏它,然后才能显示它。

时间:原作者:0个回答

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");
 }
 }
原作者:
...