jQuery UI Accordion - 在页面加载时保持元素关闭

编程问答 2022-05-28

问题描述

我正在使用 jQuery Accordion 对我网站上的 5 个不同部分进行分组。这很有效，但有一个例外：在页面加载期间，手风琴内部的元素正在显示，导致加载体验非常难看。默认情况下，我可以在窗口加载时隐藏这些元素吗？

我已经尝试了手册和其他相关问题为我提供的所有选项：

$("#accordion").accordion({
    active: false,heightStyle: "Content",autoheight: false,alwaysOpen: false,collapsible: true
});

我不知道如何更好地解释这个问题。这与我们过去遇到的旧 FOUC 问题没有什么不同。

手风琴的精简 HTML 如下：

<div id="accordion">
    <h3>To-do List</h3>
    <div>
        ...
    </div>

    <h3>Contacts</h3>
    <div>
        ...
    </div>

    <h3>Notifications</h3>
    <div>
        ...
    </div>

    <h3>Activities</h3>
    <div>
        ...
    </div>

    <h3>Time</h3>
    <div>
        ...
    </div>
</div>

解决方法

考虑以下基于演示的示例：https://jqueryui.com/accordion/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="foo">
  <div class="dprop">
     <div class="BarA"><span>Text BarA1</span></div>
     <div class="BarB"><span>Text BarB1</span></div>
  </div>
</div>

<div class="foo">
  <div class="dprop">
     <div class="BarA"><span>Text BarA2</span></div>
     <div class="BarB"><span>Text BarB2</span></div>
  </div>
</div>
$(function() {
  $("#accordion").accordion({
    active: false,heightStyle: "Content",autoheight: false,alwaysOpen: false,collapsible: true
  }).show();
});
#accordion {
  display: none;
}

请记住，<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="accordion"> <h3>Section 1</h3> <div> <p> Mauris mauris ante,blandit et,ultrices a,suscipit eget,quam. Integer ut neque. Vivamus nisi metus,molestie vel,gravida in,condimentum sit amet,nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </p> </div> <h3>Section 2</h3> <div> <p> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit,dolor at aliquet laoreet,mauris turpis porttitor velit,faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p> </div> <h3>Section 3</h3> <div> <p> Nam enim risus,molestie et,porta ac,aliquam ac,risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo,magna quis lacinia ornare,quam ante aliquam nisi,eu iaculis leo purus venenatis dui. </p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3>Section 4</h3> <div> <p> Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p> <p> Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra,per inceptos himenaeos. </p> </div> </div> 是页面为 $(function(){}) 或 ready 时的快捷方式。这意味着将首先加载到 HTML 中的 CSS 将在执行 JavaScript / jQuery 代码之前由浏览器呈现。

这就是为什么出现 HTML 结构并且 然后 Accordion 被初始化的原因。它通常非常简短，有时只有在内容较多或内容加载时间较长时才会明显；就像它包含富媒体一样。

为了解决这个问题，我们用 CSS“隐藏”了元素，然后用 jQuery“显示”了它们。是的，CSS 仍然适用，但元素的样式将覆盖它。您还可以添加具有相同样式的 $(document).ready() 之类的类，并在您准备好后将其删除。

accordionjqueryjquery-ui