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

Ваше первое предложение не работает. Когда страница загружается, и я нажимаю стрелку, которая обычно расширяет содержимое внутри «шаблона-списка-шаблонов», ничего не отображается, поэтому содержимое внутри постоянно скрыто. Кроме того, весь код перед «скриптом», который находится на PHP, фактически повторяется несколько раз, каждый из которых представляет собой другой запрос/стек. – NoReceipt4Panda

см. Выше комментарий .. – NoReceipt4Panda

Функция 'toggle()' jQuery работает, переходя между дисплеем: none и display: block. Если настройка отображается: ни одна строка не работает, значит что-то еще не так. – Dave

jQuery аккордеон flash-контент загружается только в Chrome

ответ

Смежные вопросы