JQuery slideToggle 仅在 window 调整大小时出现 [Chrome?]

Question

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

基本上想要一个按钮，点击它可以在下面切换一个全宽的 flexslider。单击时看起来什么也没有出现（尽管开发工具告诉我 div 已删除 display:none）- 然后我调整 window 和 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 似乎可能不是 "ready"。将您当前的函数包装成：

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

JQuery slideToggle 仅在 window 调整大小时出现 [Chrome?]

JQuery slideToggle only appears if window resized [Chrome?]

jquery

wordpress

google-chrome

resize

slidetoggle