我如何设置默认打开/关闭切换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 .. 任何经验呢?
再次感谢!
通过给你的<div class="morepara">
一个display:none;
与CSS div打开网站时不会显示,甚至没有互联网连接速度慢的人。
<div class="morepara" style="display:none;">
它实际上是一样的:当页面完全加载$s('.morepara').hide();
只有一个会被执行。
太棒了!我之前尝试过类似的方式,但它无法正确工作。该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
如果您的div morepara设置为无显示,您应该没有问题。给我5分钟,生病发给你一个链接jsfiddle向你展示我的意思。 – TYRONEMICHAEL 2012-07-11 11:41:33
要让内容“滑动”,可以使用'slideToggle()' – Thomas 2012-07-11 11:43:11