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

它正在使用我制作的代码片段。对于包装iframe的<p>标记，您似乎遇到了一个奇怪的问题。

检查出来。

$(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中嵌入视频

2 个答案: