加载时隐藏 jQuery Accordion [英] Hide jQuery Accordion while loading
问题描述
我正在测试一个连接速度较慢的站点构建，我注意到 jQuery Accordion 保持扩展很长时间，直到站点的其余部分被加载，然后最终崩溃.不是很漂亮.我想知道如何在加载过程中保持折叠状态，并且仅在单击时展开.
我正在使用独立的 1.6 版本的手风琴插件.
基本结构:
和脚本
jQuery().ready(function(){jQuery('#navigation').手风琴({活动:'假'，标题:'.head'，导航:真的，动画:'画架'，可折叠:真实});});我试图隐藏 CSS 中的元素，以防止它们在加载时出现，但所取得的成就是让它们始终隐藏.
也许问题出在 CSS 中，我在每个子菜单中都有一个背景图像:
#navigation{边距:0px；左边距:10px；填充:0px;文本缩进:0px;字体大小:1.1em；宽度:200px；文本转换:大写；填充底部:30px；}#导航ul{边框宽度:0px；边距:0px；填充:0px;文本缩进:0px;}#导航李{列表样式:无外无；}#navigation li ul{高度:185px；溢出:自动；}#navigation li ul.sub{背景:url('../images/sub.jpg') 不重复；显示:阻止；}#navigation li li a{颜色:#000000；显示:块；文本缩进:20px；文字装饰:无；填充:6px 0;}#navigation li li a:hover{背景色:#FFFF99;颜色:#FF0000；}预先感谢您提供有关如何让这件事运行得更顺畅并让手风琴始终崩溃的任何建议.
-edit - 我忘了提到我也希望有一个解决方案，让那些没有 Javascript 的人仍然可以访问导航.
我对我所有的网站做的第一件事:在 body 标签之后，用这个 javascript 放置一个脚本标签:
jQuery('body').addClass('js');这为任何在启用 Javascript 时看起来不同的元素提供了一个样式挂钩，并且它会立即发生.
其他答案中的其余问题都有很好的解决方案.您只需要两种基本"样式而不是一种:
#navigation ul li {/*open 没有 javascript 的样式*/}body.js #navigation ul li {/*关闭样式为 pre dom.ready*/}... 然后在 dom.ready 上应用手风琴之前重新打开.
如果您在页面末尾加载 jQuery(或未使用 jQuery)，您可以使用这个直接的 javascript 版本:
I am testing a site build with a slow connection and I noticed the jQuery Accordion stays expanded for a long time, until the rest of the site is loaded, and then finally collapses. Not very pretty. I was wondering how I could keep it collapsed through the loading process and only expand when clicked.
I am working with the standalone 1.6 version of the accordion plugin.
The basic structure :
<div class="sidebar">
<ul id="navigation" class="ui-accordion-container">
<li><a class="head" href="#">1</a>
<ul class="sub">
<li><a href="#">1a</a></li>
<li><a href="#">2a</a></li>
</ul>
</li>
</ul>
</div>
and the script
jQuery().ready(function(){
jQuery('#navigation').accordion({
active: 'false',
header: '.head',
navigation: true,
animated: 'easeslide',
collapsible: true
});
});
I tried to hide the elements in the CSS to keep them from appearing while loading but all that achieved is in having them always hidden.
Maybe the problem is in the CSS I have a background image in each of the sub menus:
#navigation{
margin:0px;
margin-left: 10px;
padding:0px;
text-indent:0px;
font-size: 1.1em;
width:200px;
text-transform: uppercase;
padding-bottom: 30px;
}
#navigation ul{
border-width:0px;
margin:0px;
padding:0px;
text-indent:0px;
}
#navigation li{
list-style:none outside none;
}
#navigation li ul{
height:185px; overflow:auto;
}
#navigation li ul.sub{
background:url('../images/sub.jpg') no-repeat;
dispaly: block;
}
#navigation li li a{
color:#000000;
display:block;
text-indent:20px;
text-decoration: none;
padding: 6px 0;
}
#navigation li li a:hover{
background-color:#FFFF99;
color:#FF0000;
}
Thanks in advance for any advice on how to have this thing run a little smoother and having the accordion always collapsed.
-edit - I forgot to mention that I am also hoping for a solution that will allow the nav to still be accessible for those without Javascript.
I do this first thing with all my sites: Right after the body tag, put a script tag with this javascript:
jQuery('body').addClass('js');
This gives you a style hook for any elements that will look different in some way when Javascript enabled, and it happens immediately.
There are good solutions to the rest of your problems in the other answers. You'll just need two "base" styles instead of one:
#navigation ul li { /*open styles for no javascript*/ }
body.js #navigation ul li { /*closed styles for pre dom.ready*/ }
... and then re-open before applying the accordion on dom.ready.
EDIT: If you're loading jQuery at the end of the page (or aren't using jQuery), you can use this straight javascript version:
<script type="text/javascript">
var b = document.getElementsByTagName('body')[0];
b.className+=b.className?' js':'js';
</script>
这篇关于加载时隐藏 jQuery Accordion的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
