JQuery slideToggle появляется только при изменении размера окна [Chrome?]

Question

Впервые плакат и любительский программист здесь - в основном мой JQuery демонстрирует очень странное поведение, поскольку я бы предположил, что это простой скрипт;

В принципе, требуется кнопка, которая нажимает на кнопку с полным шириной flexslider. Когда вы нажимаете, это выглядит так, как будто ничего не появляется (хотя Dev Tools сообщает мне, что div имеет дисплей: ни один не удален) - тогда я изменяю размер окна и BAM! Это здесь?

В Safari есть еще одна проблема, но это не имеет никакого отношения к этому (я полагаю?)

Сайт сам на WordPress - я унаследовал это как часть новой работы, у меня есть некоторые знания HTML, CSS и рудиментарный JS. Пожалуйста помоги!

/* Creative Slider 1 - OLD CODE */ 
 
$('.creativebutton1').on('click', function() { 
 
    $('.creative-content1').slideToggle('slow'); 
 
}); 
 

 
/*NEW CODE */ 
 

 
$('.creativebutton1').on('click', function(){ 
 
\t $('.creative-content1').slideToggle('slow'); 
 
\t $('.create-slider').flexslider({ 
 
\t animation: "slide", 
 
\t directionNav: true, 
 
\t controlNav: false, 
 
\t animationSpeed: 1000, 
 
\t selector: '.slides > .slide-group', 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 

 
<div class="row-fluid"> 
 
    <div class="span12"> 
 
    <a id="servicecontent"></a> 
 
    <div class="block dark-grey-bg"> 
 
     <div class="content-container container"> 
 
     <div class="block-icon bounceInLeft wow animated" style="visibility: visible;"> 
 
      <img src="http://www.placeholder.co.uk/wp-content/uploads/2014/11/service-icon-paintbrush.png" alt=""> 
 
     </div> 
 
     <div class="block-title"> 
 
      <h1> Header &amp; Header</h1> 
 
     </div> 
 
     <div class="block-text"> 
 
      <p><span class="light-blue-text"><strong></strong></span> Text Text Text Text Text Text Text Text Text Text Text</p> 
 
      <p><span class="light-blue-text"><strong>SubHead </strong></span>&nbsp;– Text Text Text Text Text Text Text Text Text Text Text Text Text .</p> 
 
      <p><span class="light-blue-text"><strong>SubHead</strong></span> – Text Text Text Text Text Text Text Text Text Text Text Text .</p> 
 
      <p><span class="light-blue-text"><strong>SubHead</strong></span> – Text Text Text Text Text Text Text Text Text Text Text Text Text .</p> 
 
      <p><span class="light-blue-text"><strong>SubHead</strong></span> Text Text Text Text Text Text Text Text .</p> 
 
      <div class="button blue-button creativebutton1 learn-more wow bounceInLeft animated" style="visibility: visible;"><a href="#creative-content1">See Examples</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- ################# SLIDER TIME #################--> 
 
<div class="row-fluid"> 
 
    <div class="span12"> 
 
    <div class="creative-content1" style="display: none;"> 
 
     <div class="flexslider create-slider"> 
 
     <div class="slides"> 
 
      <div class="slide-group"> 
 
      <div class="createslide"> 
 
       <img src="http://www.placeholder.co.uk/wp-content/uploads/2015/04/slide1.jpg" alt=""> 
 
      </div> 
 
      </div> 
 
      <div class="slide-group"> 
 
      <div class="createslide"> 
 
       <img src="http://www.placeholder.co.uk/wp-content/uploads/2015/04/slide2.jpg" alt=""> 
 
      </div> 
 
      </div> 
 
      <div class="slide-group"> 
 
      <div class="createslide"> 
 
       <img src="http://www.placeholder.co.uk/wp-content/uploads/2015/04/slide3.jpg" alt=""> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Так выглядит есть несколько вещей, здесь происходит. Сначала кажется, что ваш jQuery может быть не «готов». Заверните текущую функцию в:

$(document).ready(function(){ 
    YOUR CODE 
}); 

Заканчивать Документы here

Далее в том, что функция, как написано, не является допустимой функция, для версии JQuery используется.

Я пошел о смене функции JQuery для:

$(document).ready(function(){ 
    $('.creativebutton1').click(function() { 
    $('.creative-content1').slideToggle('slow'); 
    }); 
}); 

В качестве альтернативы, если вы хотите сохранить функцию у вас есть, просто обернуть его в $(document).ready и изменить версию JQuery для:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>