0

我遇到了一个障碍，似乎无法理解为什么这个脚本不会在我的测试页面上运行。我有 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>
4

1 回答 1

2

您的问题（在现场示例中）是您在加载 DOM 之前运行您编写的 JS 脚本（在HEAD部分中）。

一个简单的解决方法是使该脚本仅在文档准备好后运行。您只需将其输入到document.ready()即可实现此目的

<script>
$(document).ready(function () {
    var content = $('.content').hide();

    $('.toggleBtn').on('click', function() {
        $(this).next('.content').slideToggle();
        return false;
    });
 });
</script>
于 2013-08-24T00:19:30.777 回答