javascript - 显示/隐藏 css/javascript 代码未在 Chrome 中正确隐藏内容

Question

我搜索过这个网站试图找到类似的问题，但到目前为止还没有成功。希望这里有人知道答案:)。

我发现这个网站有显示/隐藏滚动代码，似乎可以满足我的需求。我已经实现了它，它在 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);
});