javascript - 简单的 jQuery 交替显示/隐藏 div

Question

希望有人能帮我解决这个问题。

我想做的是当点击 .video-play 时，它会隐藏 .video-link div 然后显示 。视频容器 div.

然后当点击.video-close时，它会隐藏.video-container并再次显示.video-link分区

澄清一下，div.wrap 及其下的所有内容(包括 .video-close)仅在单击 .video-play 时通过 jquery 添加。

<div class="video-link">
  <a class="video-play" href="#">Play Video</a>
</div>

<div class="video-container">
  <!-- This part is added by a jquery script when .video-play is clicked -->
  <div class="wrap">
   <div class="content">
    <span class="video-close"></span>
   </div>
  </div>
  <!-- / end added part -->
</div>

Answer 1

我假设一旦您阅读了该代码，您就会理解..

$(document).on('click', '.video-play,.video-close', function(e) {
  e.preventDefault();
  $('.video-link, .video-container').toggle();
});

.video-container {
  display:none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="video-link">
  <a class="video-play" href="#">Play Video</a>
</div>

<div class="video-container">
  <a class="video-close" href="#">Close</a>
</div>