jQuery 在点击时隐藏 div 并显示另一个 div

Question

我正在玩 jQuery，我试图在单击父 div 时显示一个隐藏的 div。单击父 div 后，将在其中隐藏一些 span 标签并显示隐藏 div 中的 p 标签。这一点我可以按照下面的小提琴开始工作。

$(document).ready(function() {
  $('.wrapper').click(function() {
    $('.hidden-text').toggle();
    $('.test-span').hide();
  });
});

.wrapper {
  border: 5px solid #718373;
  width: 200px;
  height: 200px;
  position: relative;
  cursor: pointer;
}
.hidden-text {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <h4>Heading</h4>
  <span class="test-span">some text</span>
  <span class="test-span">some more text</span>
  <div class="hidden-text">
    <p>A half an hour lesson for one person will include 25 clays and 25 cartridges</p>
  </div>
</div>

我遇到的问题是，我想再次“点击”来扭转上述情况，但我只是不确定如何去做。我仍在学习如何使用 jQuery。

Answer 1

您可以通过同时在两个元素上调用toggle() 来实现此目的。当它们以相反的状态开始时，切换将简单地切换它们中的哪一个在任何给定时间可见。试试这个：

$(document).ready(function() {
  $('.wrapper').click(function() {
    $('.hidden-text, .test-span').toggle();
  });
});

.wrapper {
  border: 5px solid #718373;
  width: 200px;
  height: 200px;
  position: relative;
  cursor: pointer;
}
.hidden-text {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <h4>Heading</h4>
  <span class="test-span">some text</span>
  <span class="test-span">some more text</span>
  <div class="hidden-text">
    <p>A half an hour lesson for one person will include 25 clays and 25 cartridges</p>
  </div>
</div>