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

Question

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

$(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>