jQuery UI手风琴-在页面加载时保持元素关闭 [英] jQuery UI Accordion - keeping elements closed while page loads

问题描述

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

I am using jQuery Accordion to group 5 different sections on my site. This works well, with one exception: during page load, the elements INSIDE the accordions are showing, resulting in a very ugly load experience. Could I have these elements hidden on window load by default?

我已经尝试了手册中的所有选项以及此处提供的其他相关问题:

I have tried all the options the manual and other related questions on here are providing me:

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

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

I do not know how to explain the problem better. It is not dissimilar to the old FOUC issues we used to get.

手风琴的简化HTML如下:

The stripped down HTML for the accordion is as follows:

<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/

Consider the following example based on the 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>

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

Remember that $(function(){}) is a short cut for when the page is ready, or $(document).ready(). This means that the CSS, which will load in the HTML first, will be rendered by the browser before the JavaScript / jQuery code is executed.

这就是为什么出现HTML结构并初始化然后手风琴的原因.它通常很简短，有时只有在有更多内容或内容需要花费更多时间加载时才引人注意；就像其中包含富媒体一样.

This is why the HTML structure appears and then Accordion is initialized. It's often very brief, and sometimes only noticeable if there is more content or the content takes more time to load; like if it contains rich media.

为解决这个问题，我们隐藏"了元素与CSS，然后显示"他们用jQuery.是的，CSS仍然适用，但是元素的样式将覆盖它.您还可以添加具有相同样式的类似hidden的类，并在准备就绪时将其删除.

To address this, we "hide" the elements with CSS and then "show" them with jQuery. Yes, the CSS is still applied, yet the element's style will override it. You can also add a Class like hidden, with the same styling, and remove it when you're ready.

这篇关于jQuery UI手风琴-在页面加载时保持元素关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！