顯示/隱藏css/javascript代碼沒有在Chrome中正確隱藏內容

Question

我已經scowered這個網站試圖找到類似的問題，但到目前爲止沒有運氣。希望也許有人會知道答案:)。

我發現這個網站有顯示/隱藏滾動代碼，似乎工作得很好，我想要的。我已經實現了它，並且它在Firefox上正常工作。除了「隱藏」部分中的視頻傾向於顯示在左上角之外，滾動功能在Chrome上也可以正常工作。要觸發這種情況，請點擊不同的鏈接（例如詩歌，參與等），然後再點擊音樂，這就是當它搞亂了。我已將代碼包含在標題以及「音樂」頁面中。我在詩歌部分使用了相同的代碼，並且沒有與文本有關的問題。也許它與iframe有關？非常感謝！

leclairstudios.ca

頭：

<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> 

Answer 1

考慮jQuery的？

$('.dhtmlgoodies_question').click(function(e){ 
    e.preventDefault(); 
    $('.dhtmlgoodies_answer_content').slideUp; 
    $(this).next().slideDown(500); 
});