使用jQuery单击元素时如何使div出现答案

【问题标题】：How to make a div appear when clicking on an element with jQuery使用jQuery单击元素时如何使div出现
【发布时间】：2020-01-18 11:27:18
【问题描述】：

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

我尝试使用 jQuery 定位 <a class=".demo"> 并使用单击功能将类 .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>

而且它似乎没有将打开的类添加到类 demo-div

如果你删除这个类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");
});

【问题讨论】：

您正在向 .demo 添加 2 个点击处理程序。第一个添加类，第二个删除它，这会在几毫秒内发生。将第二次点击处理程序更改为 $('.demo-div').click() 参见 jsfiddle.net/va6z075d

标签： jquery html css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

问题是因为您已将两个事件处理程序附加到同一个元素，并且它们相互冲突，因为它们添加然后删除类。

要解决此问题，您应该使用单个事件处理程序并根据其当前状态添加/删除类。你可以使用toggleClass()：

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

值得注意的是，当open 类应用于.demo-div 时，.demo 元素不再可点击，因为它已被遮挡。要解决此问题，您可以向 .demo-div 添加另一个单击处理程序，该处理程序会删除 open 类，如下所示：

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

$('.demo-div').click(function() {
  $(this).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>

【讨论】：