JQuery slideToggle 仅在窗口调整大小时出现 [Chrome？]

Question

第一次在这里发帖和业余程序员 - 基本上我的 JQuery 表现出非常奇怪的行为，因为我认为这是一个简单的脚本；

基本上想要一个按钮，点击时会在下面切换一个全宽的 flexslider。单击时，它看起来什么都没有出现（尽管开发工具告诉我 div 已删除 display:none） - 然后我调整窗口大小并 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(){
	$('.creative-content1').slideToggle('slow');
	$('.create-slider').flexslider({
	animation: "slide",
	directionNav: true, 
	controlNav: false,
	animationSpeed: 1000,
	selector: '.slides > .slide-group',
	});
});

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