切換CSS類不會改變可見性值

我想顯示一個彈出窗體只使用CSS和JavaScript。切換CSS類不會改變可見性值

這裏是我的HTML頁面：

<html> 
 
<title>W3.CSS</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
<link rel="stylesheet" 
 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<style> 
 
.popup-form { 
 
    visibility: hidden; 
 
} 
 

 
.popup-form .show { 
 
    visibility: visible; 
 
} 
 
</style> 
 

 
<body> 
 
    <div class="popup-form show" id="myPopup"> 
 
    <form> 
 
    <div class="w3-container"> 
 
     <br> <input class="w3-input" placeholder="Enter category name" /> 
 
     <br> <input class="w3-input" 
 
     placeholder="Enter category discription" /> 
 
    </div> 
 
    <div class="w3-container w3-right"> 
 
     <button class="w3-button w3-black w3-round-large" type="submit">Add</button> 
 
     <button class="w3-button w3-black w3-round-large" type="submit">Cancel</button> 
 
    </div> 
 

 
    </form> 
 
    </div> 
 
    <div onclick="myFunction()"><i class="fa fa-plus-circle w3-button"></i></div> 
 
</body> 
 

 
<script> 
 
    function myFunction() { 
 
     var popup = document.getElementById("myPopup"); 
 
     popup.classList.toggle("show"); 
 
    } 
 
</script> 
 
</html>

我可以在該.show類切換控制檯中看到，但能見度保持隱藏。那麼我錯過了什麼？

來源

2017-09-16 Ammar Samater

變化'.popup形式.show'到'.popup-form.show'。還有不應.popup形式之間'任何空間'和'.show'。 –

是否這樣？

由於類popup-form和show在同一個元素中，所以您需要更改下面的CSS。

CSS：

.popup-form { 
    visibility: hidden; 
} 

.popup-form.show { 
    visibility: visible; 
}

這裏第二個CSS的裝置。拿這個元素，它有popup-form和show這兩個類。你在做什麼之前：

.popup-form { 
    visibility: hidden; 
} 

.popup-form .show { 
    visibility: visible; 
}

取件，其中有一個父元素popup-form並採取具有show類孩子。

段：

function myFunction() { 
 
    var popup = document.getElementById("myPopup"); 
 
    popup.classList.toggle("show"); 
 
}

.popup-form { 
 
    visibility: hidden; 
 
} 
 

 
.popup-form.show { 
 
    visibility: visible; 
 
}

<html> 
 
<title>W3.CSS</title> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
<link rel="stylesheet" 
 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<body> 
 
<div class="popup-form show" id="myPopup"> 
 
    <form> 
 
     <div class="w3-container"> 
 
      <br> <input class="w3-input" placeholder="Enter category name" /> 
 
      <br> <input class="w3-input" 
 
       placeholder="Enter category discription" /> 
 
     </div> 
 
     <div class="w3-container w3-right"> 
 
      <button class="w3-button w3-black w3-round-large" type="submit">Add</button> 
 
      <button class="w3-button w3-black w3-round-large" type="submit">Cancel</button> 
 
     </div> 
 

 
    </form> 
 
</div> 
 
<div onclick="myFunction()"><i class="fa fa-plus-circle w3-button"></i></div> 
 
</body> 
 

 
<script> 
 

 
</script> 
 
</html>

來源

2017-09-16 07:11:22

謝謝Naren，你不僅給我解決方案，但你解釋我的錯誤 –

@AmmarSamater不客氣:) –

目前，您使用的

.popup-form .show { 
visibility: visible; 
}

，但你必須使用這樣

.popup-form.show { 
visibility: visible; 
}

來源

2017-09-16 07:13:46

額外的空間是問題。

.popup-form .show VS .popup-form.show

<style> 
 
.popup-form { 
 
    visibility: hidden; 
 
} 
 

 
.popup-form.show { 
 
    visibility: visible; 
 
} 
 
</style>

來源

2017-09-16 07:17:35

切換CSS類不會改變可見性值

回答

相關問題