Question

我在页面加载时遇到问题，显示了手风琴内容（jquery）

这是当前的代码：

if (jQuery('.accordion')[0]) {

    jQuery('.accordion').find('.acc_head').click(function (e) {

        e.preventDefault();

        jQuery(this).next().slideToggle('fast').css('zoom', '1');       
        jQuery(this).parent('li').toggleClass('collapse');

    });

    jQuery('.accordion > li').each(function ($) {

        if (!jQuery(this).hasClass('extended')) {

        jQuery(this).find('ul').slideUp('fast').css('zoom', '1');
        jQuery(this).toggleClass('collapse');

        }

    });
}

我已经按照我喜欢的方式运行它（基于扩展/折叠状态改变的图像，但是当页面加载两个扩展部分时我得到了内容的跳转。这是html：

<ul class="dropdown accordion">
<li class="currentpage">Overview</li>
<li><a href="#">Page 1</a></li>
<li>
    <a class="acc_head" href="#">Page 2</a>
    <ul>
        <li><a href="#">Sub 1</a></li>
        <li><a href="#">Sub 2</a></li>
        <li><a href="#">Sub 3</a></li>
        <li><a href="#">Sub 4</a></li>
    </ul>
</li>
<li><a href="#">Page 3</a></li>
<li>
    <a class="acc_head" href="#">Page 4</a>
    <ul>
        <li><a href="#">Sub 1</a></li>
        <li><a href="#">Sub 2</a></li>
        <li><a href="#">Sub 3</a></li>
        <li><a href="#">Sub 4</a></li>
    </ul>
</li>
<li><a href="#">Page 5</a></li>
</ul>

有关如何在页面加载时隐藏此内容的任何想法？

Answer 1

使用css隐藏它，无论是内联还是通过向所述元素添加类。

<li style="display: none;">

你无法使用javascript解决它，因为闪存正在发生，因为页面上存在的元素和javascript执行之间存在延迟。

这被称为无格式内容Flash（FOUC）http://en.wikipedia.org/wiki/Flash_of_unstyled_content

在某些浏览器中，通过将javascript移出dom ready处理程序并在元素受到影响后立即使其变得不那么明显且几乎不可察觉，但是，在某些浏览器中甚至是不够的。

您可能还想将jQuery(this).find('ul').slideUp('fast')更改为jQuery(this).find('ul').hide()

在我的jquery手风琴中闪现内容

1 个答案: