Question

我使用谷歌浏览器并且slideDown无法正常工作。有时div会关闭，有些时候仍然关闭，我必须刷新页面并等待它决定slideDown。这是代码：

HTML

<header>
<div class="container">
    <img src="../themes/<?= GDR_THEME ?>/images/graphic/barratop.png" />
        <div id="box_body" class="content mCustomScrollbar light" data-mcs-theme="minimal">
            <div id="box_text" >
                <form name="termini" action="core.register_1.php" method="post">
                <?php include_once "../text/regolamento.html"; ?>
                <p class="button">
                <input id="check" src="../themes/<?= GDR_THEME ?>/images/graphic/accettoff.png" 
                type="image" onMouseOver="this.src='../themes/<?= GDR_THEME ?>/images/graphic/accetton.gif'" 
                onMouseOut="this.src='../themes/<?= GDR_THEME ?>/images/graphic/accettoff.png'" />
                <input name="rego" value="ok" type="hidden" />
                </p>
                </form>
            </div>
        </div>
    <img src="../themes/<?= GDR_THEME ?>/images/graphic/barradown.png" />
</div>

CSS

.container {
    width: 600px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}
#box_body {
    width: 530px;
    height: 460px;
    position: relative;
    text-align: justify;
    overflow-y: hidden;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    display: none;  
}
#box_text {
    position: relative;
    float: left;
}
.button {
    position: relative;
    text-align: center;
}

JAVASCRIPT

$(document).ready(function(){
    $("#box_body").slideDown(2500);
});

有时它滑下来有时没有...... 我的链接：http://khchapterzero.altervista.org/core/core.register_0.php

Answer 1

slideDown()确实有效。问题是，您的脚本在DOM索引中的位置高于样式表：

<script src='../themes/custom/js/jquery.min.js'></script> 
<script src='../themes/custom/js/jquery.main.js'></script> 
<script src='../themes/custom/js/jquery.scrollbar.js'></script> 
<script src='../themes/custom/js/jquery.register_0.js'></script> 
<link rel='icon' href='../themes/custom/images/engine/icon.png' type='image/x-icon' />
<link rel='stylesheet' type='text/css' href='../themes/custom/css/main.css' />
<link rel='stylesheet' type='text/css' href='../themes/custom/css/register_0.css' /> 
<link rel='stylesheet' href='../themes/custom/css/Scrollbar.css' />

这是CSS的一部分有时会隐藏您的#box_body：

#box_body {
    ...
    display: none;  
}

您的display: none; CSS样式有时应用于 slideDown();之后的元素因为样式表文件有时在脚本文件之后加载。

好的做法是在关闭<head>代码之前将CSS样式表放在</body>代码和脚本中。

Jquery SlideDown偶尔会工作

1 个答案: