Question

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

基本上想要一个点击按钮切换下面的全宽度flexslider。单击它时看起来没有任何东西出现（虽然Dev Tools告诉我div有显示：none删除） - 然后我调整窗口和BAM的大小！它在那里？

在Safari上还有另一个问题，但它与此无关（我假设？）

网站本身是在WordPress上 - 我已经继承了这个作为新工作的一部分，我对HTML，CSS和基本JS有一些了解。请帮忙！

＆＃13;

/* 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',
	});
});

＆＃13;

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

＆＃13;

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>

只有在窗口调整大小时才会出现JQuery slideToggle [Chrome？]

1 个答案: