这是工作
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between slide up and slide down for a p element</button>
</body>
</html>
但当我移动时
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
Before <body>
标签是它不起作用,因为我想将 JavaScript 放在底部,但我不能将 document.ready 部分放在 jquery 库之后,解决方案是什么。
一:你的代码MUST在 jquery 库之后。
二:如果您将代码移至页面底部,则不需要$(document).ready(...
.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between slide up and slide down for a p element</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$("button").click(function(){
$("p").slideToggle();
});
</script>
</body>
</html>
如果您绝对必须在 jquery 库之上拥有页面特定代码,那么您可能需要一个队列系统,以便当 jquery 可用时,将处理队列。下面是一个例子
<!DOCTYPE html>
<html>
<head>
<!-- this would need to be part of the CMS header -->
<script>
window.initQueue = [];
</script>
<!-- here's your page specific js -->
<script>
window.initQueue.push(function(){
$("button").click(function() {
$("p").slideToggle();
});
})
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>Toggle between slide up and slide down for a p element</button>
<!-- cms footer -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$.each(window.initQueue,function(i,fn){
fn();
})
</script>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)