jQuery手風琴flash僅在Chrome中加載內容

我有一個帶有手風琴的頁面/模板，一旦在Google Chrome中加載，開始時會非常快速地閃爍內容，然後一旦實際加載DOM/javascript就會消失，將頁面還原爲它應該看起來的樣子。這個問題不會發生在Firefox中，只有Chrome。jQuery手風琴flash僅在Chrome中加載內容

我嘗試添加一個「jQueryElement.hide（）」，但它所作的只是完全隱藏內容..

這裏的（堆棧列表的template.php）：

<?php 
    $stackQuery = new WP_Query(array(
         'post_type' => 'abc_stack', 
         'meta_key' => 'abc_stack_key')); 

    if ($stackQuery->have_posts()) { 
     ?><div class="accordion-header"> 
      <h2><i class="blue-arrow fa-long-arrow-right fa fa-2"></i> Stacks</h2> 
     </div> 
     <div class="stack-list-container"> 
     <?php 
     while ($stackQuery->have_posts()) { 
      $stackQuery->the_post();?> 


        <?php get_template_part('content', 'stack-list-template'); ?> 


     <?php } // end while 
     echo "</div>"; 
    } 
    wp_reset_postdata(); 
?> 

<script> 
    jQuery(document).ready(function(){ 
     jQuery('.accordion-header').click(function() { 
      jQuery(this).next().toggle('slow'); 
      jQuery("i",this).toggleClass("fa-long-arrow-right fa-long-arrow-down"); 
      return false; 
     }).next('.stack-list-container').hide(); 
    }); 
</script>

我讀這裏：http://www.learningjquery.com/examples/style-noflash.html

並嘗試實施「隱藏」技術，但它只隱藏了我的內容。

什麼是使我的代碼與上述資源工作的正確方法？我寫這個腳本的正確方法是什麼，這樣手風琴內的內容在頁面加載時不會閃爍？

來源

2016-03-01 NoReceipt4Panda

應該隱藏在頁面加載的內容應該隱藏使用CSS（或者，如果有必要，內聯樣式），因爲你永遠不能確定需要加載或執行JavaScript多長時間。

所以做這一點：

<div class="stack-list-container" style="display:none">

或最好在CSS中，在您的<head>單元載荷，這樣做：

.stack-list-container{ display:none; }

您也可以刪除這條線，因爲它現在是多餘的：

.next('.stack-list-container').hide();

來源

2016-03-01 20:07:47 Dave

你的第一個建議不起作用。當頁面加載時，我點擊通常會擴展「stack-list-template」內的內容的箭頭，沒有任何內容顯示，因此內部內容永久隱藏。而且，PHP中「腳本」之前的所有代碼實際上都重複了幾次，每個代碼都是不同的查詢/堆棧。 – NoReceipt4Panda

參見上面的評論.. – NoReceipt4Panda

jQuery的'toggle（）'函數通過在display：none和display：block之間來回切換。如果設置顯示：沒有內聯不起作用，那麼其他問題是錯誤的。 – Dave

jQuery手風琴flash僅在Chrome中加載內容

回答

相關問題