Question

我正在尝试使用原型和scriptaculous来隐藏和显示div元素，但是利用原型setStyle属性的函数（下面）不起作用，我不确定是什么问题。

<script type="text/javascript" language="javascript">
    function bodyOnload() {
            $('content1').setStyle({ display: 'none' });
            $('content2').setStyle({ display: 'none' });
    }
</script>    



<script type="text/javascript" language="javascript">

    var currentId = null;

    Effect.Accordion = function (contentId) {
        var slideDown = 0.5;
        var slideUp = 0.5;

        contentId = $(contentId);

        if (currentId != contentId) {
            if (currentId == null) {
                new Effect.SlideDown(contentId, {duration: slideDown});
                } else {
                new Effect.SlideUp(currentId, {duration: slideUp});
                new Effect.SlideDown(contentId, {duration: slideDown});
            }
            currentId = contentId; 
        } else {
            new Effect.SlideUp(currentId, {duration: slideUp});
            currentId = null;
        }
    };
    </script>

前面的函数被这样调用：

<div id="accordion">
    <div id="part1">
        <div id="nav1" onclick="new Effect.Accordion('content1');">
            Post a comment 1
        </div>
        <div id="content1">
            <form id="form" name="form" action="post.php" method="post">
            <textarea name="commentbody" cols="20" rows="10"></textarea>
            <button type="submit">Post Comment</button>
            <input type="hidden" name="blogID" value="1" />
            <input type="hidden" name="userID" value="3" />
            <input type="hidden" name="parentID" value="7" />
            <div class="spacer"></div></form>
        </div>
    </div>
        <div id="part2">
        <div id="nav2" onclick="new Effect.Accordion('content2');">
            Post a comment 2
        </div>
        <div id="content2">
            <form id="form" name="form" action="post.php" method="post">
            <textarea name="commentbody" cols="20" rows="10"></textarea>
            <button type="submit">Post Comment</button>
            <input type="hidden" name="blogID" value="1" />
            <input type="hidden" name="userID" value="3" />
            <input type="hidden" name="parentID" value="7" />
            <div class="spacer"></div></form>
        </div>
    </div>
</div>

这是代码发生的事情。

在ie和firefox中它什么也没做，但是当你点击调用effect.accordion方法的链接时，该方法按预期工作。问题在于原型功能不会隐藏元素。非常感谢任何帮助。

Answer 1

maxnk已涵盖主要问题。

但是，Prototype建议使用dom:loaded事件而不是window.onload：

document.observe("dom:loaded", bodyOnload);

此外，您可以尝试使用Prototype的Element#toggle或Element#hide而不是Element#setStyle（除非每个页面上的警告都适用于您的CSS）。

function bodyOnload() {
    $('content1').hide();
    $('content2').hide();
}

Answer 2

如果你想最初隐藏元素，它就不足以编写“function bodyOnload”。应该在页面加载时使用类似的东西调用此函数：

window.onload = bodyOnload;

当然，我建议你试试jQuery：）

Answer 3

大！它现在有效。你知道这是我试图从中学到的一本书中的一个例子。作者误解了这个非常重要的部分，正如他误导说在scriptaculous中引用效果库的最佳方式是这样的：

<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/scriptaculous.js?load=effects"></script>

而不是像：

<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/effects.js"></script>

这本书对亚马逊有很好的评论，但我认为没有任何评论者试图使用这本书。他们都审查了它的数量而不是本书的内容。我试图在本书中使用的所有例子都没有奏效。我必须自己解决这个问题。我想你可以说我必须阅读本书的其他部分才能理解某个例子，但是对于一本很大的书，一个人真的能这样做吗？如果我必须知道作者之前提到过的东西，我不应该提醒它，至少在一本如此大的书中，实际上是一本参考书吗？如果你想知道：Ajax: The Definitive Guide, by Anthony T. Holdener III

更新：作者使用旧版本的Scriptaculous和Prototype库，这就是为什么会出现误解的原因。如果你得到这本书，试着记住这一点。实际上，我现在非常尊重这本书，只是因为它的剪切量。

Answer 4

感谢SlideUp和SlideDown的这些应用。

一个重要的评论：如果没有为要显示或隐藏的div设置宽度，它在ie7和ie8下不起作用。

文森特

使用原型和scriptaculous隐藏和显示div元素

4 个答案: