我遇到了一个障碍,似乎不能理解为什么这个脚本不能在我的测试页面上运行。我有jquery链接,后面跟着这个脚本。这是我唯一的脚本,所以我知道这不是js冲突。小提琴在这里:http://jsfiddle.net/dXWAY/7
var content = $('.content').hide();
$('.toggleBtn').on('click', function() {
$(this).next('.content').slideToggle();
return false;
});
.toggleBtn {
background:deepskyblue;
display:block;
float:Left;
width:100%;
padding:10px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
color:#fff;
cursor:pointer;
}
.content {
background:skyblue;
float:left;
overflow:hidden;
width:100%;
padding:10px;
}
<a class="toggleBtn">Click Me!</a>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore accusamus porro modi ut itaque ipsum natus explicabo vero sequi beatae libero voluptatibus sit culpa debitis tempore! Sint eum ipsum consequatur!</div>发布于 2013-08-24 08:19:31
您的问题(在活动示例中)是在加载DOM之前运行您编写的JS脚本(在HEAD部分中)。
一个简单的解决方法是使该脚本仅在文档准备好之后运行。您只需将其输入到document.ready()中即可完成此操作
<script>
$(document).ready(function () {
var content = $('.content').hide();
$('.toggleBtn').on('click', function() {
$(this).next('.content').slideToggle();
return false;
});
});
</script>https://stackoverflow.com/questions/18413291
复制相似问题