0

我使用前段时间在网站上找到的一些 jquery 代码来切换内容。默认情况下，内容是关闭的，当单击特殊链接时，内容会以平滑的幻灯片动画形式打开。到目前为止，一切都很好。问题是，默认情况下应该隐藏的内容在页面加载之前是可见的，然后在加载 jquery 后立即关闭。我已将 jquery 放在页面末尾以减少网站内容的加载时间。我知道这种行为是自然的，但我已经看到其他切换脚本之前可以打开的内容甚至在 jquery 位加载之前就关闭了。问题是互联网连接速度较慢的人在页面完成加载之前会在很长一段时间内看到“隐藏”部分。然后该部分关闭，因为它应该默认关闭。

即使在加载 jquery 之前，我也尝试过 css 来保持部件关闭，但问题是我无法通过单击“显示更多”链接再打开它，因为 css 仍然强制它保持关闭.. 指压！！

这是我使用的代码：

<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>

哦，图像交换脚本效果很好，那部分没有问题:)

提前致谢！:)

4

3 回答 3

3

通过使用 CSS 给您<div class="morepara">的 a display:none;，div 在打开网站时将永远不会出现，即使对于互联网连接速度较慢的人来说也是如此。

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

它实际上是一样的：$s('.morepara').hide();只有在页面完全加载时才会执行。

于 2012-07-11T11:44:19.440 回答
1

你可以用 CSS 隐藏它：

.morepara {
    display:none;
}

...然后使用 jQuery 切换可见性

于 2012-07-11T11:45:21.417 回答
0

这是链接。删除 .children 并将父级设置为不显示。

于 2012-07-11T11:45:46.037 回答