檢查 Jquery Ui 是否呈現？

Question

我正在使用 jquery ui（標簽和手風琴）。 當頁面加載時，我看到所有內容，因為選項卡/手風琴代碼尚未呈現。

我想將內容隱藏到選項卡中，並且手風琴插件已將自身綁定到所有內容。

但是我不知道如何檢查這個？

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>accordion demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
    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.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
    faucibus interdum tellus libero ac justo.</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.</p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
</div>
 
<script>
$( "#accordion" ).accordion();
</script>
 
</body>
</html>

在手風琴插件呈現為正確的手風琴之前，不要顯示任何內容。

Answer 1

最壞的情況是你可以用 css 隱藏手風琴父級

#accordion { display: none}

並將show()到插件初始化：

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

Answer 2

我在 jQueryUI 選項卡上遇到了同樣的問題，並以這種方式解決了它。 在正文中，在定義選項卡后，我將它們隱藏起來，如下所示。

<UL ID=TabList STYLE='list-style-type: none'>
  <LI><A HREF='#tabs-1'>Page 1 </A></LI>
  <LI><A HREF='#tabs-2'>Page 2</A></LI>
  <LI><A HREF='#tabs-3'>Page 3</A></LI>
</UL>
<SCRIPT>
/* Hide the above section as soon as it's created, otherwise it displays briefly as a regular bulleted list before being converted into tabs. This only works here, not in the head. The section is shown after the tabs are created. */
  $('#TabList').hide();
</SCRIPT>

然后我在頭部腳本部分的頂部執行以下代碼行，它在 document.ready 函數之前運行。 我不確定為什么，但這比將它放在 document.ready 中顯示它們的行之前更能抑制未轉換 UL 的簡短顯示。

$(function() {$('#tabs').tabs()});

然后在 document.ready 函數中顯示它們。

$('#TabList').show();

檢查 Jquery Ui 是否呈現？

問題描述

2 個解決方案

解決方案1
0 2020-08-31 23:29:07

解決方案2
0 2020-09-01 02:14:52

檢查 Jquery Ui 是否呈現？

問題描述

2 個解決方案

解決方案1 0 2020-08-31 23:29:07

解決方案2 0 2020-09-01 02:14:52

解決方案1
0 2020-08-31 23:29:07

解決方案2
0 2020-09-01 02:14:52