如何在 javascript slidetoggle 中嵌入视频

Question

我正在尝试实现 javascript 滑动切换，点击按钮后在文本后嵌入 YouTube 视频，但它无法正常工作。有谁知道我做错了什么？

HTML:

<h2> What Is Black Ballad? </h2>
<p> This is some text. </p>
<p class="reveal1">
This is some more text and then an embedded video.
    <div class="video-container">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/JfHXbPv9cUg" frameborder="0" allowfullscreen></iframe>
    </div>
</p>
<div id="more1" align="center" title="View More">
  <img src="http://www.blackballad.co.uk/wp-content/uploads/2016/10/drop.png" width="20px" height="20px">
</div>

JavaScript:

$(document).ready(function(){
    $("#more1").click(function(){
        $(".reveal1").slideToggle("slow");
    });
});

CSS:

.reveal1 {
    display: none;
}

Answer 1

它在我制作的这个代码片段中起作用。 <p> 标签包装 iframe 似乎有一个奇怪的问题。

检查一下。

$(document).ready(function(){
    $("#more1").click(function(){
        $(".reveal1").slideToggle("slow");
    });
});

.reveal1 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<h2> What Is Black Ballad? </h2>
<p> This is some text. </p>
<div class="reveal1">
  This is some more text and then an embedded video.
  <div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/JfHXbPv9cUg" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
<div id="more1" align="center" title="View More">
  <button>
    Click me
  </button>
</div>

Answer 2

通过将 javascript 命令更改为以下内容来修复它：

$(document).ready(function(){
  $("#more1").click(function(){
      $(".reveal1").slideToggle("slow");
      $(".video-container").slideToggle("slow");
  });

如何在 javascript slidetoggle 中嵌入视频

How to embed video within a javascript slidetoggle

html

javascript

jquery

slidetoggle