我已经浏览了这个网站，试图找到一个类似的问题，但到目前为止还没有运气。希望也许这里有人会知道答案:)。
我发现这个网站有显示/隐藏滚动代码，似乎可以很好地满足我的需求。我已经实现了它，它在 Firefox 上运行良好。除了“隐藏”部分中的视频倾向于显示在左上角之外，滚动在 Chrome 上也可以正常工作。要触发这一点，请单击不同的链接（即诗歌、参与等），然后单击返回音乐，这就是它搞砸的时候。我已将代码包含在标题中以及“音乐”页面中。我在诗歌部分使用了相同的代码，文本没有问题。也许它与iframe有关？非常感谢！
头：
<style type="text/css">
.dhtmlgoodies_question{ /* Styling question */
/* Start layout CSS */
width:500px;
margin-bottom:2px;
margin-top:2px;
padding-left:2px;
height:20px;
/* End layout CSS */
cursor:pointer;
}
.dhtmlgoodies_question:hover{
color: red ;
}
.dhtmlgoodies_answer{ /* Parent box of slide down content */
/* Start layout CSS */
background-color:#e6e5f8;
/* End layout CSS */
visibility:hidden;
height:0px;
overflow:hidden;
position:relative;
}
.dhtmlgoodies_answer_content{ /* Content that is slided down */
padding:1px;
font-size:0.9em;
position:relative;
}
</style>
<script type="text/javascript">
/************************************************************************************************************
Show hide content with slide effect
Copyright (C) August 2010 DTHMLGoodies.com, Alf Magne Kalleland
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.
Alf Magne Kalleland, 2010
Owner of DHTMLgoodies.com
************************************************************************************************************/
var dhtmlgoodies_slideSpeed = 10; // Higher value = faster
var dhtmlgoodies_timer = 10; // Lower value = faster
var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
var dhtmlgoodies_slideInProgress = false;
var dhtmlgoodies_expandMultiple = false; // true if you want to be able to have multiple items expanded at the same time.
function showHideContent(e,inputId)
{
if(dhtmlgoodies_slideInProgress)return;
dhtmlgoodies_slideInProgress = true;
if(!inputId)inputId = this.id;
inputId = inputId + '';
var numericId = inputId.replace(/[^0-9]/g,'');
var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);
objectIdToSlideDown = false;
if(!answerDiv.style.display || answerDiv.style.display=='none'){
if(dhtmlgoodies_activeId && dhtmlgoodies_activeId!=numericId && !dhtmlgoodies_expandMultiple){
objectIdToSlideDown = numericId;
slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
}else{
answerDiv.style.display='block';
answerDiv.style.visibility = 'visible';
slideContent(numericId,dhtmlgoodies_slideSpeed);
}
}else{
slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
dhtmlgoodies_activeId = false;
}
}
function slideContent(inputId,direction)
{
var obj =document.getElementById('dhtmlgoodies_a' + inputId);
var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
height = obj.clientHeight;
if(height==0)height = obj.offsetHeight;
height = height + direction;
rerunFunction = true;
if(height>contentObj.offsetHeight){
height = contentObj.offsetHeight;
rerunFunction = false;
}
if(height<=1){
height = 1;
rerunFunction = false;
}
obj.style.height = height + 'px';
var topPos = height - contentObj.offsetHeight;
if(topPos>0)topPos=0;
contentObj.style.top = topPos + 'px';
if(rerunFunction){
setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
}else{
if(height<=1){
obj.style.display='none';
if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
}else{
dhtmlgoodies_slideInProgress = false;
}
}else{
dhtmlgoodies_activeId = inputId;
dhtmlgoodies_slideInProgress = false;
}
}
}
function initShowHideDivs()
{
var divs = document.getElementsByTagName('DIV');
var divCounter = 1;
for(var no=0;no<divs.length;no++){
if(divs[no].className=='dhtmlgoodies_question'){
divs[no].onclick = showHideContent;
divs[no].id = 'dhtmlgoodies_q'+divCounter;
var answer = divs[no].nextSibling;
while(answer && answer.tagName!='DIV'){
answer = answer.nextSibling;
}
answer.id = 'dhtmlgoodies_a'+divCounter;
contentDiv = answer.getElementsByTagName('DIV')[0];
contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
contentDiv.className='dhtmlgoodies_answer_content';
contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
answer.style.display='none';
answer.style.height='1px';
divCounter++;
}
}
}
window.onload = initShowHideDivs;
音乐：
<br /><br />
<p> Click song name to expand video - page currently best viewed with Firefox</p>
<hr>
<br />
<div class="dhtmlgoodies_question"><p>Eli, The Barrow Boy</p></div>
<div class="dhtmlgoodies_answer">
<div>
<iframe width="420" height="315" src="http://www.youtube.com/embed/NEF8N-5zVMU" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
<br />
<div class="dhtmlgoodies_question"><p> Pussywillows, Cattails, Softwinds, and Roses </p></div>
<div class="dhtmlgoodies_answer">
<div>
<iframe width="420" height="315" src="http://www.youtube.com/embed/R7XOiSmh7ik" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>
<br />
<div class="dhtmlgoodies_question"><p>Chasing Cars</p></div>
<div class="dhtmlgoodies_answer">
<div>
<iframe width="420" height="315" src="http://www.youtube.com/embed/ZTm6--Bu7W8" frameborder="0" allowfullscreen>
</iframe>
</div>
</div>