11

我正在测试一个连接速度较慢的站点构建，我注意到 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;
}

在此先感谢您提供有关如何让这件事运行得更顺畅以及手风琴总是崩溃的任何建议。

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

4

10 回答 10

16

我对我所有的网站都做这第一件事：在 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>
于 2009-04-01T04:06:49.910 回答
6

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

$(".accordion").show();
$(".accordion").accordion();
于 2009-04-26T19:27:03.190 回答
4

jQuery.ready() 中的代码在 DOM 准备好之前不会运行——因此对于最终将被隐藏的元素保持可见一段时间是正常的。以这种方式设置 Accordion 部分是为了便于使用，部分是为了优雅地降级：如果禁用 JavaScript，内容不会丢失（隐藏）。

如果您愿意冒险在没有 JavaScript 的情况下破坏页面，请继续将您的元素设置为隐藏。然后，就在 .accordion() 之前，show() 它们。

这是一个保持兼容性的想法。它已经过最低限度的测试，可以发表评论。

不理会您的 CSS，但将其添加到 JavaScript 的顶部（外部 jQuery.ready()）：

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

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

于 2009-04-01T02:26:07.907 回答
1

直接在手风琴元素下方的 <script> 中进行 .accordion 绑定，而不是等待文档准备好。

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

您可以将手风琴父元素设置为“可见性：隐藏”，然后在脚本初始化时手动将其恢复为“可见”。但是，关闭 JavaScript 的浏览器根本看不到内容，这并不理想。

于 2009-04-01T02:58:33.850 回答
1

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

body {
  display: none; 
}

如果出于某种原因关闭了 javascript，则不会显示任何内容；)

于 2010-09-08T16:48:00.593 回答
0

我没有使用过 UI 手风琴，但我用 jQuery 构建了手风琴。该脚本唯一要做的就是改变手风琴面板的可见性。因此，如果在页面加载时一个面板可见，那么也许您应该尝试使用 CSS 规则，例如：

ul.sub{
  visiblity:hidden;
  display:none;
}
于 2009-04-01T02:08:18.433 回答
0

我试图隐藏 CSS 中的元素以防止它们在加载时出现，但所取得的只是让它们始终隐藏。

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

jQuery('#navigation').show().accordian...

于 2009-04-01T02:19:58.780 回答
0

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

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

在我的主样式表中：

body {
  display: none; 
}

在我的主 javascript 文件中，在 jQuery.ready() 的底部：

$(document).ready(function() { 
   $("body").show(); 
}
于 2010-06-03T15:31:42.977 回答
0

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

于 2010-06-28T09:55:16.143 回答
0

我没有使用过 UI 手风琴，但我用 jQuery 构建了手风琴。该脚本唯一要做的就是改变手风琴面板的可见性。因此，如果在页面加载时一个面板可见，那么也许您应该尝试使用 CSS 规则，例如：

ul.sub{
  visiblity:hidden;
  display:none;
}
于 2013-10-24T10:01:27.697 回答