Question

我正在测试一个缓慢连接的网站构建，我注意到jQuery Accordion长时间保持扩展，直到网站的其余部分加载，然后最终崩溃。不是很漂亮我想知道如何通过加载过程让它崩溃，并且只有在点击时才会展开。

我正在使用手风琴插件的独立1.6版本。

基本结构：

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

和脚本

jQuery().ready(function(){
    jQuery('#navigation').accordion({ 
        active: 'false', 
        header: '.head', 
        navigation: true,
        animated: 'easeslide',
        collapsible: true
    });     
});

我试图隐藏CSS中的元素以防止它们在加载时出现，但所有实现的是将它们始终隐藏起来。

问题可能在CSS中我在每个子菜单中都有背景图像：

#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;
}

提前感谢任何关于如何让这个东西运行得更顺畅并且手风琴总是崩溃的建议。

- 编辑 - 我忘了提到我也希望有一个解决方案，允许那些没有Javascript的人仍然可以访问导航。

Answer 1

我首先在我的所有网站上做这件事：在body标签之后，用这个javascript放一个脚本标记：

jQuery('body').addClass('js');

这为您提供了一个样式挂钩，用于在启用Javascript时以某种方式看起来不同的任何元素，并且它会立即发生。

在其他答案中，其他问题都有很好的解决方案。你只需要两个“基础”样式而不是一个：

#navigation ul li { /*open styles for no javascript*/ }
body.js #navigation ul li { /*closed styles for pre dom.ready*/ }

...然后在dom.ready上应用手风琴之前重新打开。

编辑：如果你在页面末尾加载jQuery（或者不使用jQuery），你可以使用这个直接的javascript版本：

<script type="text/javascript">
    var b = document.getElementsByTagName('body')[0];
    b.className+=b.className?' js':'js';
</script>

Answer 2

一周前我遇到了这个问题。我将容器设置为display：none，然后使用jQuery使其在适当的时间显示：

$(".accordion").show();
$(".accordion").accordion();

Answer 3

jQuery.ready（）中的代码在DOM准备好之前不会运行 - 所以最终被隐藏的元素暂时保持可见状态是正常的。手风琴的设置方式部分是为了便于使用，部分是为了优雅降级：如果禁用JavaScript，内容不会丢失（隐藏）。

如果您愿意冒险在没有JavaScript的情况下破坏的页面，请继续并将您的元素设置为隐藏。然后，紧接在.accordion（）之前，显示（）它们。

<小时/> 这是保持兼容性的想法。它经过了最低限度的测试，可以发表评论。

单独保留CSS，但将其添加到JavaScript的顶部（外部 jQuery.ready()）：

document.styleSheets[0].addRule(".yourclass", "display:none");

这样，在构建页面时，将设置CSS规则来隐藏隐藏的元素。然后，在jQuery.ready()内，在初始化手风琴之前调用$(".yourclass").show()将它们带回来。

Answer 4

直接在＆lt; script＆gt;中执行.accordion绑定在手风琴元素下面，而不是等待文件准备好。

然后它们会尽快激活，而不是等到页面“准备好”（这可能需要很长时间，尤其是IE，它不支持DOMContentLoaded事件，所以jQuery必须等待onload ，只在所有图像和所有内容都加载后才会触发。

你可以将accordion parent元素设置为'visibility：hidden'，然后在脚本初始化时手动将其恢复为'visible'。但是关闭JavaScript的浏览器根本看不到内容，这是不理想的。

Answer 5

在可访问性方面小心使用它：

body {
  display: none; 
}

如果由于某种原因javascript被关闭，则不会显示任何内容;）

Answer 6

我没有使用过UI手风琴，但我已经用jQuery构建了手风琴。脚本所做的唯一事情就是交替使用手风琴面板的可见性。因此，如果在加载页面时看到一个面板，那么您可能应该尝试使用CSS规则，例如：

ul.sub{
  visiblity:hidden;
  display:none;
}

Answer 7

我试图隐藏中的元素 CSS以防止它们出现加载，但所有实现的是让他们永远隐藏起来。

为什么不尝试将其隐藏在CSS中，然后执行此操作：

的jQuery（ '＃导航'）。显示（）。手风琴...

Answer 8

我在许多门户网站上有数百个jQuery元素（标签，滑块和手风琴）。为每个设置隐藏/显示样式不是一个现实的选择。

简单的解决方案，隐藏身体直到jQuery准备好并构建元素，然后显示正文。

在我的主样式表中：

body {
  display: none; 
}

在我的主javascript文件中，位于jQuery.ready（）的底部：

$(document).ready(function() { 
   $("body").show(); 
}

Answer 9

我一直在使用像Tim建议的那样的css解决方案，但这些意味着要为禁用javascript的人（或没有javascript支持的设备）隐藏内容。我更喜欢Jerph提供的解决方案，感谢分享。

Answer 10

我没有使用过UI手风琴，但我已经用jQuery构建了手风琴。脚本所做的唯一事情就是交替使用手风琴面板的可见性。因此，如果在加载页面时看到一个面板，那么您可能应该尝试使用CSS规则，例如：

ul.sub{
  visiblity:hidden;
  display:none;
}

加载时隐藏jQuery Accordion

10 个答案: