Question

我正在尝试使用jquery来滑动我在页面上的页脚标记中切换的图像。我没有得到任何错误，它表明jquery是一个来源，但没有任何反应。这是相关的HTML代码：

<button type="submit" class="btn btn-default" id="hidePic">Submit</button>
          </div>
        </div>
      </div>
    </form>
    <div class="row">
      <div class="col-md-12 padding-top-10em">
        <ul class="no-bullets font-style">
          <li class="flow-left col-md-2 col-md-offset-3 col-xs-12">Find Chats</li>
          <li class="flow-left col-md-2 col-xs-12">Rate Chats</li>
          <li class="flow-left col-md-2 col-xs-12">Become a Bubsta<span class="enlargeText">R</span>!</li>
        </ul>
      </div>
    </div>
    <footer><img id="pic" src="chat.jpg"></footer>
  </div>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script src="index.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

这里是js代码：

$( "#hidePic" ).click(function() {
    $( "#pic" ).slideToggle( "slow", function() {
        // Animation complete.
    });
});

Answer 1

尝试在提交按钮上使用prevent default ...并像其他人一样说，请在doc ready函数中包装（参见下面的代码）。

这样的事情：

<script>
$(function(){
  $( "#hidePic" ).click(function(e) {
      e.preventDefault();
      $( "#pic" ).slideToggle( "slow", function() {
          // Animation complete.
      });
  });
});
</script>

jquery slidetoggle无法正常工作 - 没有出现任何错误

1 个答案: