jquery - 使用 jQuery 单击元素时如何使 div 出现

Question

我有一个不可见的 div，我想通过单击一个元素使其可见。 它似乎不起作用。我在这里缺少什么？

我试过定位 <a class=".demo">使用 jQuery 并使用点击功能添加类 .open至 <div class="demo-div">使其可见

$(".demo").click(function() {
  $(".demo-div").addClass("open");
});

$(".demo").click(function() {
  $(".demo-div").removeClass("open");
});

.demo-div {
  background: #3AB0E0;
  color: #18191D;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 3.75rem;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  transform: tranlateY(-100%);
  transition: all 0.5s ease-in-out;
}

.demo-div.open {
  opacity: 1;
  z-index: 99;
  visibility: visible;
  transform: translateY(0);
  transition: all 0.5s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="javascript:void(0);" class="demo">click here</a></li>
  </ul>
</nav>
<div class="demo-div"></div>

而且好像没有给class demo-div添加class open

如果删除这个类demo-div你可以看到它出现

opacity: 0;
visibility: hidden;

***更新 我明白我做错了什么，在添加新类时它应该包含一个关闭按钮，例如 .demo-close-btn

$(".demo").click(function() {
  $(".demo-div").addClass("open");
});

$(".demo-close-btn").click(function() {
  $(".demo-div").removeClass("open");
});

Answer 1

使用 toggleClass() 而不是添加或删除。

$(".demo").on('click', function() {
  $(".demo-div").toggleClass("open");
});