使用Prototype和Scriptaculous隐藏和显示div元素

Question

我正在尝试使用prototype和scriptaculous来隐藏和显示一个div元素，但是利用prototype的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方法的链接时，该方法按预期工作。问题出在原型函数上，它不能隐藏元素。非常感谢您的任何帮助。

- play

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();
}

- Jonathan Lonowski

---

哦，我只是不知道如何在原型中正确地制作它:( 现在我知道了，谢谢！ - maxnk

Answer 2

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

window.onload = bodyOnload;

当然，我建议你尝试一下 jQuery :)

- maxnk

Answer 3

感谢您使用 SlideUp 和 SlideDown 应用程序。

重要提示：如果您不为要显示或隐藏的 div 设置宽度，则在 ie7 和 ie8 下无法正常工作。

Vincent

- Vincent Duplessy

Answer 4

太好了！现在它可以工作了。你知道这是我试图学习的一本书中的例子。作者忽略了这个非常重要的部分，就像他误导地说，在scriptaculous中引用effects库的最佳方式是这样的：

<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权威指南》, 作者Anthony T. Holdener III

更新：作者使用了较旧版本的Scriptaculous和Prototype库，所以存在误解。如果你购买了这本书，请记住这一点。现在，我对这本书有了深深的敬意，仅仅因为它的厚度。

- play