Question

我有一个奇怪的问题。我有一个使用jQuery和CSS的简单页面，即使我有通过Google API嵌入jQuery的代码，javascript也无法在本地计算机或我的Web服务器上运行。

它在JS Bin（http://jsbin.com/oyimes/2/edit）上运行正常，就在我在Dreamweaver中将它们放在一起时。这是我的代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

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

JavaScript的：

// JavaScript Document

$('.subtitles').hide();

$('#title1').click(function(){
  $('#title1subtitles').slideToggle(750,function(){
    $('#title1subtitles li div').animate({width:'100%'}, 1500);
  });
});

$('#title3').click(function(){
  $('#title3subtitles').slideToggle(400,function(){
    $('#title3subtitles li div').animate({width:'100%'}, 1500);
  });
});

$('#title4').click(function(){
  $('#title4subtitles').slideToggle(400,function(){
    $('#title4subtitles li div').animate({width:'100%'}, 1500);
  });
});

Answer 1

您需要将您的js代码包装在$(document).ready(function()

中

$(document).ready(function(){
    $('.subtitles').hide();

    $('#title1').click(function(){
      $('#title1subtitles').slideToggle(750,function(){
        $('#title1subtitles li div').animate({width:'100%'}, 1500);
      });
    });

    $('#title3').click(function(){
      $('#title3subtitles').slideToggle(400,function(){
        $('#title3subtitles li div').animate({width:'100%'}, 1500);
      });
    });

    $('#title4').click(function(){
      $('#title4subtitles').slideToggle(400,function(){
        $('#title4subtitles li div').animate({width:'100%'}, 1500);
      });
    });
});

它在jsbin中工作的原因是它为你添加了$(document).ready(function(){

jQuery不在JS Bin之外工作

1 个答案: