如何在openclose toggle jquery中设置默认值？

Question

我在一个网站上找到了一个小的jquery代码，用来切换内容。默认情况下，内容是关闭的，当一个特殊的链接被点击时，内容会以流畅的幻灯片动画打开。我知道这种行为是自然的，但我以前也见过其他切换脚本，可以打开的内容甚至在jquery位加载之前就被关闭了。问题是，网络连接速度慢的人看到 "隐藏 "的部分有相当长的一段时间，直到页面完成加载。

我试过在jquery加载之前用css来保持该部分的关闭，但问题是我不能再通过点击 "show more "链接来打开它，因为css仍然强迫它保持关闭......shiatsu!

下面是我使用的代码。

<div class="morepara"> content that should be hidden by default can be opened by clicken on the image link below</div>

<p class="togglebutn">
<a>
<img src="/images/read-more.png" class="img-swap" aid="myImage"/>
</a>
</p>

<script type="text/javascript">
var $s = jQuery.noConflict();
$s('document').ready(function() {
    $s('.morepara div').hide();
    $s('.togglebutn a').click( function() {
        var parentpara = $s(this).parent().prev().children();
        parentpara.toggle('normal');
    });
});
$s(function() {
    $s(".img-swap").live('click', function() {
        if ($s(this).attr("class") == "img-swap") {
            this.src = this.src.replace("-more", "-less");
        } else {
            this.src = this.src.replace("-less", "-more");
        }
        $s(this).toggleClass("on");
    });
});
</script>

哦，图像交换脚本工作得很好，这部分没有问题:)

先谢谢你! :)

Answer 1

通过给你的 <div class="morepara"> a display:none; 用CSS打开网站时，div永远不会出现，即使是网速慢的人也不会出现。

<div class="morepara" style="display:none;">

其实它和。$s('.morepara').hide(); 只有当页面完全加载时才会执行。

Answer 2

你可以直接用CSS隐藏它:

.morepara {
    display:none;
}

...然后用jQuery来切换可见性。

Answer 3

这里是 联系. 移除.children，并将父级设置为显示无。