隐藏jQuery的手风琴，而加载

StackOverflow https://stackoverflow.com/questions/703783

  •  22-08-2019
  •  | 
  •  

题

我测试网站建设有一个缓慢的连接，我注意到了jQuery手风琴撑扩大了很长一段时间，直到该网站的其余部分被加载，然后终于崩溃。不是很漂亮。我想知道我怎么能保持它倒塌通过加载过程，只有点击时展开。

我与独立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访问。

有帮助吗？

解决方案

我跟我所有的网站这第一件事情：身体标记之后，把脚本标记与此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>

其他提示

我一个星期前，面对这个非常的问题。余设置的容器，以显示：无，然后用于jQuery来使它在合适的时间显示出来：

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

里面jQuery.ready代码（），直到DOM不运行准备 - 所以这是正常的，最终将被隐藏，以保持可见了一会儿元素。手风琴是这种方式设置部分用于易用性的，另一部分是优雅降解的缘故。内容不会丢失（隐藏），如果禁用JavaScript

如果你愿意冒险，没有JavaScript的打破了网页，继续设置你的元素被隐藏。然后，之前.accordion（），显示（）他们。

这里有一个想法，以保持兼容性。它已被最低限度地测试，并且是开放的评论。

留下你独自CSS，但这种添加到您的JavaScript的顶部（之外的jQuery.ready()）：

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

这样的话，在页面正在建设中，CSS规则将被设置为隐藏你的隐藏要素。然后，内部jQuery.ready()，呼叫$(".yourclass").show()来使其返回到初始化手风琴之前。

做你.accordion直接在

scroll top