免责声明:这是来自“python coder learning jQuery”的问题。
我有以下简单的 html 结构(文件名:index.html):
<!DOCTYPE html>
<html>
<head>
<title>astrobox.io | Welcome!</title>
<script type="text/javascript" src="/Users/iMacHome/astroboxio/script.js"></script>
<link rel="stylesheet" type="text/css" href="/Users/iMacHome/astroboxio/stylesheet.css"></link>
</head>
<body>
<div class="panel">
<br />
<br />
<p>Welcome!</p>
</div>
<p class="slide"><div class="pull-me">astrobox.io</div></p>
</body>
</html>
这链接到以下 .js 脚本(文件名:script.js):
$(document).ready(function() {
$('.pull-me').click(function(){
$('.panel').slideToggle('slow')
});
});
为了完整起见，这是我的 .css 文件(文件名:stylesheet.css):
body {
margin:0 auto;
padding:0;
width:800px;
text-align:center;
}
.pull-me{
-webkit-box-shadow: 0 0 8px #562cd4;
-moz-box-shadow: 0 0 10px #562cd4;
box-shadow: 0 0 10px #562cd4;
cursor:pointer;
}
.panel {
background: #000000;
background-size:90% 90%;
height:380px;
display:none;
color:#ffffff;
font-family:basic,arial,sans-serif;
}
.panel p{
text-align:center;
}
.slide {
margin:0;
padding:0;
border-top:solid 2px #562cd4;
}
.pull-me {
display:block;
position:relative;
right:-25px;
width:150px;
height:20px;
font-family:basic,arial,sans-serif;
font-size:14px;
color:#ffffff;
background:#562cd4;
text-decoration:none;
-moz-border-bottom-left-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.pull-me p {
text-align:center;
}
现在，我将所有这三个脚本都放在同一个目录中，并且在将 index.html 文件打开到 safari 和 Google chrome 时，向下切换功能不起作用。它用于测试...
谁能解释一下为什么会发生这种情况。更好的是，如果您能发现问题或为什么它不起作用，那就太好了。
最佳答案
确保您已经添加了 jquery 或者您有正确的脚本顺序(首先是 jquery，然后是您的脚本)。 例如:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/Users/iMacHome/astroboxio/script.js"></script>
如果您忘记包含 jquery 脚本或使用 jquery 的库将无法工作
关于javascript - html+css+js 组合在 Google Chrome 或 Safari 浏览器中无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28663688/