切换CSS类不会改变可见性值

我只是尝试使用CSS和JavaScript显示弹出表单。

这是我的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类已切换，但可见性保持隐藏。那我想念什么？

当前，您正在使用

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

但是您必须像这样使用

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

额外的空间是问题所在。

.popup-form .show vs .popup-form.show

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

这样的？

由于类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>

相关内容

最新更新

热门标签：