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>

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

1 个答案: