jQuery UI 手风琴 - 在页面加载时保持元素关闭

Question

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

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

$("#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>

Answer 1

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

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

请记住，当页面为 ready 或 $(document).ready() 时，$(function(){}) 是一个快捷方式。这意味着将首先在 HTML 中加载的 CSS 将在执行 JavaScript / jQuery 代码之前由浏览器呈现。

这就是 HTML 结构出现并且然后手风琴被初始化的原因。它通常非常简短，有时只有在内容较多或内容加载时间较长时才会引起注意；比如它是否包含富媒体。

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

jQuery UI 手风琴 - 在页面加载时保持元素关闭

jQuery UI Accordion - keeping elements closed while page loads

jquery

jquery-ui

accordion