如果是顯示樣式，則顯示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

回答

相關問題