我如何设置默认打开/关闭切换jquery

即时通讯使用我在网站上发现的一个小小的jQuery代码切换内容。默认情况下内容是关闭的，当一个特殊的链接被点击时，内容以平滑的幻灯片动画打开。迄今为止很好。问题是，默认情况下隐藏的内容在加载页面之前是可见的，然后在jquery加载后立即关闭。我已将jquery放在页面的末尾，以减少网站内容的加载时间。我知道这种行为是自然的，但我已经看到其他切换脚本之前，可以打开的内容甚至在jquery位加载之前关闭。问题在于，互联网连接速度较慢的用户在页面加载完成后才会看到“隐藏”部分。那么零件会关闭，因为它默认会关闭。我如何设置默认打开/关闭切换jquery

我已经试过css保持部分关闭甚至在jquery加载之前，但问题是，我不能打开它了，因为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>

哦，图像交换脚本事先的伟大工程，没有问题的那部分:)

的感谢！ :)

编辑：感谢所有的快速答案..即时通讯使用显示：无;选项现在，但我想知道这是否是一个问题，因为.. 经验告诉我，谷歌没有计算隐藏默认情况下，但可以显示使用JavaScript的内容.. 即时通讯不安静相信如果它会索引现在的内容，因为它现在将隐藏使用CSS .. 任何经验呢？

再次感谢！

来源

2012-07-11 Jascha Goltermann

如果您的div morepara设置为无显示，您应该没有问题。给我5分钟，生病发给你一个链接jsfiddle向你展示我的意思。 – TYRONEMICHAEL 2012-07-11 11:41:33

要让内容“滑动”，可以使用'slideToggle（）' – Thomas 2012-07-11 11:43:11

通过给你的<div class="morepara">一个display:none;与CSS div打开网站时不会显示，甚至没有互联网连接速度慢的人。

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

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

来源

2012-07-11 11:44:19 Lumocra

太棒了！我之前尝试过类似的方式，但它无法正确工作。该div将被默认关闭，但当我点击链接并执行jquery时，我也无法打开它。但是现在我已经明白了，谢谢！ – 2012-07-11 12:49:01

我想指出CSS的执行顺序也是其中的一部分..内联CSS覆盖样式CSS，除非你！重要的样式CSS。设置一个类并使类规则显示：none可以很容易地用常规'$ .toggle（）'来改变，但是内联CSS倾向于覆盖'$ .toggle（）'iirc – RozzA 2014-03-16 02:45:59

避免内联样式（此答案使用它，避免它！），你正在尝试做什么，应该工作得很好。 – RozzA 2014-03-16 02:46:39

你可以只用CSS隐藏：

.morepara { 
    display:none; 
}

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

来源

2012-07-11 11:45:21 micadelli

这里是link。删除.children并将父级设置为不显示任何内容。

来源

2012-07-11 11:45:46 TYRONEMICHAEL

我如何设置默认打开/关闭切换jquery

回答

相关问题