Question

希望有人可以帮助我。

我要做的是点击.video-play后，它会隐藏.video-link div然后显示.video-container div。

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

只是为了澄清，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>

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

1 个答案: